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

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

//Using $.on inside Ajax success handler

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

});

>如果DOM中不存在容器,则此方法不起作用.为了使其工作,将不得不使用文件或身体作为容器,性能可能不太好.
> 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成功处理程序都没有代码混乱.

缺点:我不确定是否有.

如有任何建议,请告知.

更新

将事件绑定到将动态添加的元素需要将侦听器放在文档上,而不是版本1.9中的元素.从Jquerys api你可以找到这一行:

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

因此,将事件绑定到文档并在之后放置选择器将允许实际识别该侦听器.

$(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?

希望这可以帮助.

本站公众号
   欢迎关注本站公众号,获取更多程序园信息
开发小院