当页面保存在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中保留一些页面，因此来回移动页面可能会多次访问.

As Jquery Mobile keeps some pages in the DOM when navigating around, a page may be visited multiple times when going back and forth.

如果我要绑定到如下页面，并且在此绑定内，请执行我的所有页面逻辑，其中包括嵌套元素绑定":

If I'm binding to a page like below and inside this binding perform all my page logic, which includes "nested element bindings":

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

来回移动会使我的嵌套绑定多次被附加.

Going back and forth causes my nested binding to be attached multiple times.

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

Right now trying to work around this like so (doesn't work...):

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

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

因此，我只允许第一个绑定通过，然后阻止随之而来的所有其他绑定尝试.

So I'm only allowing the first binding to pass and then I block every other binding attempt that comes along.

虽然可行，但远非最佳.

While this works, it's far from optimal.

问题:
事件绑定应该如何以及何时适当地解除绑定/关闭?是否有一般方法(全部杀死)，还是必须每次绑定都执行此绑定?也许更重要:在用户访问/离开页面时，一次绑定并保留该绑定或绑定/取消绑定，这在性能上是否更好?

Question:
How and when should event bindings be properly unbound/offed? Is there a general way (kill all) or do I have to do this binding per binding? Maybe more importantly: Is it better performance-wise to do a binding once and keep it or bind/unbind when the user comes to/leaves the page?

感谢您的输入！

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

EDIT:
So I'm namespacing all my events and then listen for pageHide like so:

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

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

While this seems to unbind, it also fires when ever I close a custom dialog/selectmenu on the page, so I'm loosing my bindings before leaving the page. So partial answer, I should use off(), but how to bind to the page really being left vs. opening and closing a select menu?

推荐答案

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

When you use .on() like that, you are delegating the event handling to the document element, meaning you can setup that delegated event binding anytime you want because the document element is always available.

我有两个建议:

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

• Use the pageinit or pagecreate event to only run the page-specific bindings when pages are added to the DOM and initialized. Using this method I would not delegate the event bindings within the pageinit or pagecreate event handlers because when they fire, all the elements on the pseudo-page are in the 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命中次数会减少，但每次调度事件(任何冒泡的事件)时，都必须检查它是否与委派相匹配事件处理程序的选择器.

Basically when you bind an event using delegation like you are, the actual CPU hit of adding the event handler is less but each time an event is dispatched (of any kind that bubbles) it has to be checked if it matches the delegated event handler's selector.

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

When you bind directly to elements it generally takes more time to do the actual binding because each individual element has to be bound to rather than binding once to the document element like with event delegation. This however has the benefit that no code runs unless a specific element receives a specific event.

文档中的简短内容:

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

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

这篇关于当页面保存在DOM中时，如何使用开/关正确解除Jquery-Mobile中的事件绑定?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！