网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

工作积累(六)——jQuery实现DOM元素事件动态绑定

用 jQuery 为DOM元素绑定事件时,如果用下面这种方式:

专注于为中小企业提供网站设计制作、网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业肥乡免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上1000家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

按钮一
$(function() {
  $('.dynamic-bind').on('click', function(e) {
    alert(e.type); //’click’
});
});

那么如果在绑定事件之后通过 jQuery 添加与该选择器相同的新的DOM元素:

$('.dynamic-bind:last').after('按钮二');

则在浏览器中点击 按钮二时,不会弹出 alert 提示,然而,通过 jQuery 添加DOM元素是十分常用的,这一问题必须要解决,通常来说有以下两种方法。

 

1.将绑定事件封装到方法中:

var dynamicBind = function($element, event) {
  $element.on(event, function(e) {
    alert(e.type);
  });
};

然后在每次用jQuery 添加DOM元素后调用该方法:

$('.dynamic-bind:last').after('按钮二');
dynamicBind($('.dynamic-bind:last'), 'click');

这样做虽然解决了问题,但是每添加一次DOM元素都要调用一次绑定事件的方法,不仅容易乱而且太 low 。

 

2.使用jQuery的事件委派机制:

所谓 jQuery 的事件委派机制,可以简单理解为jQuery 会自动为匹配的元素附加一个事件处理函数,即使这个元素是在委派声明之后被添加的。这里仍旧用 on 来委派事件,只是参数略有不同:

$(document).on('click', '.dynamic-bind', 'Hello', function(e) {
  alert(e.data); //'Hello'
});

这样一来,无论之后用jQuery 添加多少个 ,jQuery 都会自动为其绑定该 click 事件,问题得以完美解决。需要注意的是,这里的‘Hello’ 参数不是必传的,如果传入则会赋值到 e.data ,这里传入只是为了对 event 对象做一下了解。

 

补充:

1.在早期的 jQuery 版本中,事件委派和解除委派使用的是 .live().die() .delegate() .undelegate() ,大约在 jQuery 1.9 之后的版本中这些方法都被取消,取而代之的是 .on() .off() 方法,如果在高版本的 jQuery 中使用 .live() 等方法会抛出异常。

2.在事件委派时,并不一定只能使用 $(document).on(…); 方式,这里的 $(document) 可以为任何被委派对象的父DOM元祖,如:


  按钮一

则事件委派时也可以写为:

$('#btn-father').on('click', '.dynamic-bind', 'Hello', function(e) {
  alert(e.data);
});

完。

 

参考资料:

http://www.zhidao91.com/jquery-on-no-effective/


文章题目:工作积累(六)——jQuery实现DOM元素事件动态绑定
网页路径:http://bjjierui.cn/article/gpjpop.html

其他资讯