jQuery Selectors: Capturing A Links -
i think i'm having problem selector. have rotating carousel , wish capture of a
clicks inside of li
(each li
contains clickable background image , links).
i'm pretty sure selector correct li
since can replace a
, .click
event .hide()
, hides 2nd image (li
) correctly. how correct selector capature of 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; next 4 follow same format if 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>
if elements generated carousel plugin, need 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: of jquery 1.7, .live() method deprecated. use .on() attach event handlers. users of older versions of jquery should use .delegate() in preference .live(). should be:
$(function() { $( "#flexgrid ul#rotator-slides li:eq(0)" ).on( "click", "a", function(event) { event.preventdefault(); alert('got it'); }); });
Comments
Post a Comment