javascript - 当页面保存在 DOM 中时，如何使用开/关在 Jquery-Mobile 中正确解除绑定(bind)事件？

Question

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

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

// 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
        });
    });

来回导致我的嵌套绑定(bind)被附加多次。

现在尝试像这样解决这个问题(不起作用...):

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

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

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

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

问题:
应该如何以及何时正确解除绑定(bind)/关闭事件绑定(bind)？有没有通用的方法(全部杀死)或者我必须每次绑定(bind)都执行此绑定(bind)？也许更重要的是:执行一次绑定(bind)并保留它或在用户进入/离开页面时绑定(bind)/取消绑定(bind)在性能方面是否更好？

感谢输入!

编辑:
所以我为所有事件命名空间，然后像这样监听 pageHide:

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

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

Answer 1

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

我有两个建议:

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

.

$(document).on('pageinit', '#register', function() {
    //note that `this` refers to the `#register` element
    $(this).find('.registerSubmitter').on('click', function(e) {
        // do something
    });
});

• 绑定(bind)委托(delegate)的事件处理程序一次，不用担心页面何时实际位于 DOM 中:

.

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

基本上，当您像现在这样使用委托(delegate)绑定(bind)事件时，添加事件处理程序的实际 CPU 命中较少，但每次分派(dispatch)事件(任何类型的冒泡)时都必须检查它是否与委托(delegate)相匹配事件处理程序的选择器。

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

来自文档的快速介绍:

Triggered on the page being initialized, after initialization occurs. We recommend binding to this event instead of DOM ready() because this will work regardless of whether the page is loaded directly or if the content is pulled into another page as part of the Ajax navigation system.

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