请使用firefox,chrome等最新浏览器浏览本站。

jquery实现为动态元素添加事件

js+jquery 阿豹 396次浏览 0个评论 扫描二维码

使用js为动态元素(后来添加的元素)添加事件,我们通常采用事件委托,即利用冒泡原理,给父级元素绑定事件,通过e.target获取事件源,通过事件源的相关属性判断是否是要执行事件的对象。
例如:
给ul下的li添加鼠标悬浮事件

ul.onmouseover = function(ev){
    //获取event对象
    var ev = ev || window.event;
    //获取事件源
    var target = ev.target || ev.srcELement;
    if(target.nodeName.toLowerCase == "li"){
        //事件
    }
}

在jquery提供了相应的事件委托的方法。
比如:为ul下的li和p标签添加点击事件,输出内容。

html代码:
<ul>
    <li><p>1</p></li>
    <li><p>2</p></li>
</ul>
js代码:
$("ul").on("click", "p", function(e){
    //e.stopPropagation();
    alert($(this).html());
}).on("click", "li", function(e){
    alert($(this).html());
});

这样写就可以为动态添加的li标签自动绑定上对应的事件。
但是这样写还有一个问题,就是当点击p标签是,会触发p标签的点击事件,然后在触发li标签的点击事件。这是由于冒泡赵成的,解决办法是在p标签的回调中添加e.stopPropagation()来阻止冒泡。


喜欢 (3)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到