jQuery Mobile click 事件只起作用一次，在由于点击事件而改变 DOM 之后

Posted 2023-05-09

【中文标题】jQuery Mobile click 事件只起作用一次，在由于点击事件而改变 DOM 之后

【英文标题】：jQuery Mobile click event works only once, after DOM is changed due to the click event

【发布时间】：2013-02-28 20:19:02

【问题描述】：

我正在尝试使用 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”，点击事件也不会绑定到这个“ new" $('.segment.next') 从第二次开始。相反，点击事件仍然绑定到原来的 $('.segment.next')。有没有办法解决这个问题？任何帮助将不胜感激！

提前致谢！

【参考方案1】：

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

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

【讨论】：

非常感谢您的回复，艾舍伍德！它工作得很好。老实说，我不知道 jQuery .on() 仅适用于非动态元素。