onClick() 无法定位 dropkick 中的元素.js

Question

我正在使用超级棒的dropkick.js，但我注意到一件小事;瞄准列表中的元素似乎不可能与jquery onClick()事件。

我试过使用第n个子选择器(通过css工作很好)和警报，停止传播和各种不同的方法;但出于某种原因，每当我点击列表中的一个元素时，它不会听到我点击了那个元素，也不会继续做我要求它做的事情。下面是我的代码:

<div class="dk_options" style="top: 34px;">
     <ul class="dk_options_inner">
          <li class="" style=""><a data-dk-dropdown-value="">PICK A PRINT</a></li>
          <li class="digital dk_option_current" style=""><a data-dk-dropdown-value="digital">Giclee Print</a></li>
          <li class="screen"><a data-dk-dropdown-value="screen">Screen Print</a></li>
     </ul>    
</div>

脚本如下:

<script type="text/javascript">
     $(document).ready(function() {
 $('.screen-price').hide();
  $('.screen').click(function(){
      $('.digital-price').hide();
      $('.screen-price').show();
      return false;
   });
   $('.digital').click(function(){
      $('.screen-price').hide();
      $('.digital-price').show();
      return false;
   });
   $('.add-to-cart').click(function(){
      return false;
   });              
    });

</script>

我不知道这是怎么回事;我已经尝试了各种解决方案。

Answer 1

好的。我想我弄明白了。我不知道为什么它是这样工作的，但它是。

因此，为了定位我的菜单，我必须:

1)具体调用菜单;本例中为。price-menu

2)确保我使用。dropkick 来命名它

$('.price-menu').dropkick({

3)使用change: function()语句

4)把它们串在一起，看起来像这样:

$('.price-menu').dropkick({
  change: function () {
      $('.screen').click(function(){
  })}
});

现在，由于某种原因，我想让它做的代码是在这整个东西之外，但仍然在脚本本身;查看一下:

$(document).ready(function() {
$('.screen-price').hide();
$('.price-menu').dropkick({
  change: function () {
      $('.screen').click(function(){
  })}
});
$('.screen').click(function(){
      $('.digital-price').hide();
      $('.screen-price').show();
});
$('.digital').click(function(){
      $('.screen-price').hide();
      $('.digital-price').show();
});

});

这就行了。我不知道确切的原因，但它有效。

有人对这是如何工作的有任何见解，或者愿意向我解释一下吗?

同时，非常感谢每个在这个帖子上发帖的人——我很感激:c)

干杯!JC