1

由于 Jquery Mobile 在导航时会在 DOM 中保留一些页面，因此在来回移动时可能会多次访问一个页面。

如果我要绑定到如下所示的页面并在此绑定内执行我的所有页面逻辑，其中包括“嵌套元素绑定”：

// listener for the page to show:
$(document).on('pagebeforeshow.register', '#register', function() {

    // stuff

    // page event bindings:
    $(document).on('click.register', '.registerSubmitter', function(e) {
        // do something
        });
    });

来回移动会导致我的嵌套绑定被附加多次。

现在尝试像这样解决这个问题（不起作用......）：

 $(document).on('click', '.registrySubmitter', function(e) {

         if ( $(this).attr('val') != true ) {
            $(this).attr('val') == true;
            // do something
            }
     });

所以我只允许第一个绑定通过，然后我阻止所有其他绑定尝试。

虽然这可行，但远非最佳。

问题：
应该如何以及何时正确地解除/关闭事件绑定？有没有一般的方法（杀死所有）还是我必须每次绑定都做这个绑定？也许更重要的是：在用户进入/离开页面时进行一次绑定并保留它或绑定/取消绑定在性能方面是否更好？

感谢您的输入！

编辑：
所以我正在命名我所有的事件，然后像这样监听 pageHide：

$(document).on('pagehide.register', '#register', function(){
   $(document).off('.registryEvents');
   });

虽然这似乎解除了绑定，但当我关闭页面上的自定义对话框/选择菜单时它也会触发，所以我在离开页面之前失去了绑定。所以部分答案，我应该使用 off()，但是如何绑定到真正离开的页面与打开和关闭选择菜单？

4

1 回答 1

3

当您.on()这样使用时，您将事件处理委托给document元素，这意味着您可以随时设置该委托事件绑定，因为该document元素始终可用。

我有两个建议：

  • 使用pageinitorpagecreate事件仅在将页面添加到 DOM 并初始化时运行特定于页面的绑定。使用这种方法，我不会在pageinitorpagecreate事件处理程序中委托事件绑定，因为当它们触发时，伪页面上的所有元素都在 DOM 中：

.

$(document).on('pageinit', '#register', function() {
    //note that `this` refers to the `#register` element
    $(this).find('.registerSubmitter').on('click', function(e) {
        // do something
    });
});
  • 绑定一次委托的事件处理程序，不用担心页面何时实际在 DOM 中：

.

//this can be run in the global scope
$(document).on('click.register', '.registerSubmitter', function(e) {
    // do something
});

基本上，当您像您一样使用委托绑定事件时，添加事件处理程序的实际 CPU 命中较少，但每次调度事件（任何类型的冒泡事件）时，都必须检查它是否与委托事件处理程序的选择器匹配.

当您直接绑定到元素时，通常需要更多时间来进行实际绑定，因为每个单独的元素都必须绑定到而不是document像事件委托那样绑定到元素一次。然而，这样做的好处是除非特定元素接收到特定事件，否则不会运行任何代码。

文档中的简短说明：

在初始化发生后，在正在初始化的页面上触发。我们建议绑定到此事件而不是 DOM ready()，因为无论是直接加载页面还是将内容作为 Ajax 导航系统的一部分拉入另一个页面，这都会起作用。

来源：http: //jquerymobile.com/demos/1.1.0/docs/api/events.html

于 2012-06-08T16:12:45.157 回答