当页面保留在DOM中时，如何使用开/关正确解绑Jquery-Mobile中的事件

how to properly unbind events in Jquery-Mobile using on/off when a page is kept in the DOM?

本文关键字：Jquery-Mobile 事件 保留 DOM 中时 何使用      更新时间：2023-09-26

由于 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（），但是如何绑定到真正离开的页面与打开和关闭选择菜单？

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

我有两个建议：

  • 使用 pageinit 或 pagecreate 事件仅在将页面添加到 DOM 并初始化时运行特定于页面的绑定。使用此方法，我不会委托pageinit或pagecreate事件处理程序中的事件绑定，因为当它们触发时，伪页面上的所有元素都在 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

相关文章：