Question

我认为我的选择器出了问题。我有一个旋转旋转木马，希望捕获a内的所有li次点击（每个li包含一个可点击的背景图片和链接）。

我非常确定我的选择器在li之前是正确的，因为我可以用a替换.click和.hide()事件，并且它隐藏了第二张图片（li）正确。如何更正我的选择器以标注所有a链接？

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

由于（编辑：仅添加代码1st li;如果有帮助则接下来的4个格式相同）

<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

如果a元素是由carousel插件生成的，则需要使用jQuery＆＃34;＆＃34; live＆＃34;功能：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'); 
  });
});

<强> //编辑：从jQuery 1.7开始，不推荐使用.live（）方法。使用.on（）附加事件处理程序。旧版jQuery的用户应该使用.delegate（）而不是.live（）。所以它应该是：

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

jQuery选择器：捕获链接

1 个答案: