在页面开发过程中常常遇到需要动态添加元素,然后给这一元素绑定相关事件的情况,这种情况下一般需要给元素加上相关属性,然后写这些元素的事件函数即可。动态添加的元素怎么绑定事件呢? 2 }) n/ \( Y. D7 _! I; L# Y一、原生JavaScript % n( A2 h6 H+ L' E+ a. }( g1 M* R/ f1 d 原生JavaScript主要有2种实现方式,第一种是在动态添加的html代码中添加oclick事件,然后传递一个唯一的参数来判断点击的是哪个,然后做相应的操作。 - m" S6 }7 |$ a | w1 d- m$ x% c
第二种是通过事件委托的原理进行处理,事件委托将一个 事件监听器实际上绑定到整个容器,然后每个列表项被点击就可以访问,这样效率更高。/ O n1 E* N j
第一:onclick, I6 j& b8 P5 P+ a S( T
document.getElementById('joblist').addEventListener('click', function (ev) {
var target = ev.target || ev.srcElement;
if (target.nodeName.toLowerCase() == 'button') {
var e = document.getElementById(target.parentNode.id);
document.getElementById("joblist").removeChild(e);
}
});
二、jquery实现 2 f6 F: @3 W, X) J/ {4 h% X 从 jQuery 1.7 开始,您应该使用on的方式,语法如下:5 N6 W! b. I& M) ~5 @9 t `
例如,如果您的页面使用类名动态创建元素,dosomething您会将事件绑定到已经存在的父级(这是这里问题的核心,您需要绑定到存在的东西,不要绑定到动态内容),这可以(也是最简单的选项)是document. 尽管记住document可能不是最有效的选择。' B0 y. Z: ~1 @1 I# T. E: B
$(document).on('mouseover mouseout', '.dosomething', function(){
// what you want to happen when mouseover and mouseout
// occurs on elements that match '.dosomething'
});