Question

I am having some trouble in triggering a click event .

I have html something like this :

<div class="carousel-control" >
<a href='#' id="carousel_1">1</a>
<a href='#' id="carousel_2">2</a>
<a href='#' id="carousel_3">3</a>
<a href='#' id="carousel_4">4</a>
<a href='#' id="carousel_5">5</a> 
etc
</div>

Now Here is the JS

jQuery('.carousel-control a').bind('click', function() {
        alert("carousel cliced")
        return false;
      });

$('#nextimg').click(function() {

var car_index=2;
                $('#carousel_'+(car_index+1)).trigger('click');
alert("next image clicked");
               return false;
            });

Now when I manually click the href tag the alert(“carousel clicked”) appers,
but when I click the nextimg only next image alert appears not the carousel alert.

I tried using

 $('#carousel_2').trigger('click'); 
 $('#carousel_2').click();
 $('#carousel_2').triggerHandler('click');

There seems to be no error in the firebug too.

Can someone please help me out. 🙂
Thank you,

Answer 1

using

 $('.carousel-control a').bind('click', function()

instead of this

jQuery('.carousel-control a').bind('click', function()

Works well.

But can anyone explain me why is it happening so ?