jQuery 自动将事件处理程序注册到通过 Ajax 响应添加到 DOM 的元素上的用户操作

Question

对于具有许多屏幕和导航的ajax Web应用程序，要附加div或链接或按钮的事件处理程序，我们可以编写如下代码:

//Using $.on inside Ajax success handler

$("#container").on("click", "#selector", function(event){

});

• 如果 DOM 中不存在容器，则此方法将不起作用。要使其工作，必须使用 document 或 body 作为容器，性能可能不太好。

• Ajax 成功处理程序中可能有很多行代码。为了更好地组织，可以将代码移动到一个函数并在 Ajax 成功处理程序中调用该函数。但我们必须为所有排列和组合制作许多寄存器事件函数。

• 注册函数代码困惑。

• 如果事件处理程序已经注册，再次注册将导致出现两个偶数处理程序。因此我们必须取消注册并注册(或者仅在尚未附加的情况下附加) - 不确定性能问题。

还有其他选择吗？

我正在考虑以下内容:

• 在一个位置为模块维护容器、目标和单击事件处理程序的映射。

• 在 ajaxComplete 全局事件处理程序中，如果 xhr.responseHTML 有容器，则将事件处理程序附加到目标元素(仅在尚未附加时才附加)。

  $(document).ajaxComplete(function(e, xhr, settings){
     for(ind in clickEventListeners){eventlistner = clickEventListeners[ind];
      if($(eventlistner.container,xhr.responseHTML).length > 0){
        $(eventlistner.target).on("click",function(){
        eventlistner.processor(this);
        });
    }
   }
  });
  

优点:模块的所有事件处理程序都记录在一个位置。每个 ajax 成功处理程序都没有困惑的代码。

缺点:我不确定是否有。

如有建议请告知。

Answer 1

已更新

将事件绑定(bind)到将动态添加的元素需要将监听器放置在文档上，而不是版本 1.9+ 的元素上。从 Jquerys api 你可以找到这一行:

“事件处理程序仅绑定(bind)到当前选定的元素；当您的代码调用 .on() 时，它们必须存在于页面上。”

因此，将事件绑定(bind)到文档并随后放置选择器将允许该监听器真正被识别。

$(document).delegate( "#selector", "click",

或

$(document).on( "click", "#selector",

示例:http://jsfiddle.net/2HA7d/

在以前的 Jquery 版本中，可以使用 live() 函数，该函数实际上将监听器放置到文档中，从而使其能够完全按照您的想法运行:

$("#selector").live("click",

示例:http://jsfiddle.net/q3jYB/

第二个示例的功能与第一个示例相同。

由于该元素尚不存在，javascript 无法为您正在查找的元素添加事件监听器。因此，当尝试为动态添加的元素添加监听器并且您使用的是较新的 jquery 版本 (1.9+) 并使用 on() 或 delegate() 时，请将事件监听器添加到文档中，如提供的第一个 Fiddle 中所示。

编辑:

正如我在评论中所说，如果可能的话，将事件监听器添加到容器也是一个非常可行的选择，并且可以提高性能

来源:

https://api.jquery.com/on/

http://jquery.com/upgrade-guide/1.9/

How does jQuery .live() work?

希望这有帮助。