Question

我正在尝试使用jQuery Mobile多页面设置绑定点击事件，如下所示（此页面不是主页面）：

HMTL

<div data-role="page" id="thirdPage">
   <div class="wrapper">
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment prev"></div>
      <div class="segment now"></div>
      <div class="segment next"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
      <div class="segment"></div>
   </div>
</div>

的jQuery

$('.segment.next').on('click', function(){
var seg = $(this);
var width = seg.width();
var currentLeft = parseInt($('.wrapper').css('left'));
var left = currentLeft - width;
    //using transit.js for css animation
$('.wrapper').transition({left : left}, 300, 'linear', function(){
                    $('.segment').filter('.prev').removeClass('prev');
                    $('.segment').filter('.now').removeClass('now');
                    seg.removeClass('next').addClass('now');
                    seg.prev().addClass('prev');
                    seg.next().addClass('next');
                });
});

大多数事情似乎都在起作用：它应该删除/添加类，并使用适当数量的像素将包装器动画到左侧。但是，$（'。segment.next'）部分无法正常工作 - 即使正确的$（'。segment'）在第一个动画之后具有“next”类，click事件也不会绑定到此“新的“$（'。segment.next'）从第二次开始。相反，click事件仍然绑定到原始的$（'。segment.next'）。有什么方法可以解决这个问题吗？任何帮助将不胜感激！

提前感谢一大堆！

Answer 1

$('#thirdPage').on('click', '.segment.next', function(){
    ...
});

委托通过引用始终存在的元素的后代来工作。您不必使用文档，但需要使用一些非动态的祖先。

在由于click事件而更改DOM之后，jQuery Mobile点击事件仅工作一次

1 个答案: