0

我正在使用 jQuery Mobile 选项allowSamePageTransition，它使我能够从

页面 A > 页面 A > 页面 A ...

我需要它来允许浏览项目目录。我的问题是，这些项目需要某种形式的交互，我曾经将交互绑定附加到document，因为它是在生成受影响的元素之前设置的。

但是，一遍又一遍地重新加载同一个页面会在每次重新加载时重新绑定我的事件处理程序。

我的第一个想法是.off在页面被隐藏但重新加载页面时使用，将在显示的同一页面上#foo触发，因此所有绑定都设置为pagehide

$(document).on("pagebeforeshow.foo_events", "#foo", function(e) {
  // bind when shown
});

将被先前#foo的隐藏再次解除绑定

$(document).on("pagehide", "#foo", function (e) {
  $(this).off(".foo_events");
  // removes bindings on #foo being hidden AND shown
});

我想出的唯一解决方案是document用类涂抹，我不喜欢这样做：

priv.setBindings = function (param) {
    var doc = $(document);

  doc
    .filter(function() { return $(this).is(".e_gallery") !== true; })
    .on("pagebeforeshow.gallery", param.pageId, function (e) {
      doc.addClass(".e_gallery");
      // run stuff
    });
};

但我不喜欢将课程附加到dom。

问题：
有没有办法防止$(document)在不切换类的情况下一遍又一遍地访问同一页面时设置多个事件绑定？

4

1 回答 1

2

解决方案 1

最好的解决方案是使用pageinit绑定事件。如果您查看官方文档，您会发现它pageinit只会触发一次，就像文档准备好一样，因此事件不会再次被绑定。这是最好的解决方案，因为您没有像使用 off 方法删除事件时那样的处理开销。

工作 jsFiddle 示例：http: //jsfiddle.net/Gajotres/AAFH8/

当然，如果使用多个 HTML 解决方案，这将失败。

解决方案 2

在绑定之前删除事件：

$(document).on('pagebeforeshow', '#index', function(){       
    $(document).off('click', '#test-button').on('click', '#test-button',function(e) {
        alert('Button click');
    }); 
});

工作 jsFiddle 示例：http: //jsfiddle.net/Gajotres/K8YmG/

解决方案 3

使用 jQuery 过滤器选择器，如下所示：

$('#carousel div:Event(!click)').each(function(){
    //If click is not bind to #carousel div do something
});

因为事件过滤器不是官方 jQuery 框架的一部分，所以可以在这里找到：http: //www.codenothing.com/archives/2009/event-filter/

这可能是最好的解决方案，因为事件只会被绑定一次。

解决方案 4

可能是其中最简单的一个。

$(document).on('pagebeforeshow', '#index', function(){       
    $(document).on('click', '#test-button',function(e) {
        if(e.handled !== true) // This will prevent event triggering more then once
        {
            alert('Clicked');
            e.handled = true;
        }
    }); 
});

工作 jsFiddle 示例：http: //jsfiddle.net/Gajotres/Yerv9/

这是一个与解决方案 3 有 180% 不同的解决方案，在这种情况下，事件将被绑定多次，但只允许执行一次。

更多信息

如果您想了解有关此问题的更多信息，请查看本文，其中包含工作示例。

于 2013-07-29T15:04:03.350 回答