Yesterday as I was editing my Portfolio which has the carousel functionality, I encountered a peculiar functionality. None of the left clicks on the link worked. However, the links opened on pressing the right click and clicking ”open in new tab”.

After a little search, I got the answer at the the life saver Stack Overflow. It explains that the Carousel API prevents the default functionality of any click using e.preventDefault(). Hence, none of the clicks are going to work.

Now this was a problem as Carousel is an important element for my website and I could not afford to get rid of the links as well.

So I tried the following approach:

In my file script.js, I wrote:

 $(document).ready(function(e) {
 $('.regular-link').click(function(e){
 e.stopPropagation();
 });
 //more code here
 }

The e.stopPropagation() prevents an event to bubble up to its parent, i.e, this event is not caught by the parent element data-slide=\"1\". Now whenever I needed a link to work, I added class regular-link in the <a> tag and whoa! it works now!