jquery-mobile - 有没有办法阻止 JQuery Mobile 复制事件？

Question

我正在将点击事件附加到我页面上的图像。

$('.ui-block-b img').click(function(event) {}

我正在使用 jQuery 移动固定页脚。

我尝试使用 pagecreate 来初始化它。和 pageinit事件。

当我单击页脚中的链接(使用 Ajax 加载)然后返回到带有单击处理程序的页面时， pagecreate和 pageinit正在被重新解雇。这是附加另一个单击事件，因此当我单击图像时，会触发 2 个事件。

我想知道是否有解决此问题的 jquery Mobile 事件？我错过了文档中的某些内容吗？

我已经通过在附加事件之前检查事件是否存在来解决这个问题，但似乎 jQuery mobile 应该有一些东西来处理这个问题？我已经做好了

var events = $('.ui-block-b img').data('events');
if (typeof events == 'undefined') { // attach handler}

也许 jQuery mobile 已经解决了这个问题，而我只是遗漏了一些东西？

Answer 1

您不应该使用新页面加载 JS，因为您知道您遇到的问题是每次创建页面并且每次绑定(bind)另一个单击事件时 JS 都在运行。

解决方案是使用 native jQM 指针 $.mobile.activePage 引用您的元素，该指针在 pageshow 事件触发后可用。或者通过放置一个 jQuery on pageinit 事件中根页面 div(不是文档)的监听器。

通过使用 $('.ui-block-b img').click(function(event) {}您可能会将绑定(bind)事件附加到多个页面中的元素(因为 jQuery 将页面附加到 DOM)，这就是您正在做的事情。

<script type="text/javascript">         
   $("div:jqmData(role='page'):last").bind('pageinit', function(){
      //your code here - $.mobile.activePage not declared, but you can setup 
      // "on" events here that handle elements ONLY on this page
      //e.g. $(this).on('click', 'img.ui-block-b', function(){});
      // this puts a live event listener that only listens for this page
   });

   $("div:jqmData(role='page'):last").bind('pageshow', function(){
      //your code here - $.mobile.activePage works now
   });
</script>

现在，当您绑定(bind)事件时，您可以确保您只影响当前页面上的元素。

组织这个有点痛苦，所以我概述了一个更好的解决方案，我在这里给出了另一个问题: Jquerymobile - $.mobile.changepage