jQuery Selectors: Capturing A Links

Question

I think I'm having a problem with my selector. I have an rotating carousel and wish to capture all of the a clicks inside of the li (each li contains a clickable background image and links).

I'm pretty sure my selector is correct up to the li since I can replace the a and the .click event with .hide() and it hides the 2nd image (li) correctly. How do I correct my selector to capature all of the a links?

jQuery('#flexgrid .columns div ul#rotator-slides.slides li:eq(1) a').click(function(event){    
  event.preventDefault();  
  alert('got it'); 
});

Thanks (Edit: Added code 1st li only; the next 4 follow the same format if that helps)

<div id="flexgrid">
  <div class="columns"> 
    <div class="flexslider col-reset" id="standard-rotator" data-slide-speed="9500" data-animation-speed="900">
      <ul class="slides" id="rotator-slides">
        <li class="rotator-slide item" data-slide="1">
          <div class="mboxDefault">
            <div class="text-block">
              <div class="hero-content" style="left: 10px; top: 70px;">
                <div class="position-content">
                  <div class="button-bottom" style="width: 360px;">
                    <h2>Lorem ipsum dolor sit amet</h2>
                    <p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </em></p>
                  </div>
                  <a href="storefront.html" target="_self" class="button">Find Out More </a> </div>
              </div>
            </div>
            <a href="storefront.html" target="_self" class="hero-image" style="background-image:url(/images/hero1.jpg);"></a> 
          </div>
          <script>mboxCreate('carousel-slide-1');</script> 
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 1

If the a elements are generated by the carousel plugin, you need to use jQuery's "live" function: https://api.jquery.com/live/

$( "#flexgrid .columns div ul#rotator-slides.slides li:eq(1) a" ).live( "click", function(event) {
    event.preventDefault();  
    alert('got it'); 
  });
});

//edit: As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live(). So it should be:

$(function() {
  $( "#flexgrid ul#rotator-slides li:eq(0)" ).on( "click", "a", function(event) {
    event.preventDefault();  
    alert('got it'); 
  });
});