jquery动态添加元素绑定事件问题分析

发布时间:2019-10-25编辑:脚本学堂
有关jquery动态添加元素与绑定事件的方法,jquery动态添加标签、动态添加元素的问题分析,感兴趣的朋友参考下。

jquery添加新的元素,然后绑定已有事件,例如:有一ul,点击其中某 li,根据其 id 或 value 等获取新的数据列表,并新建 ul 显示,新 ul 中的 li 标签绑定相同的点击事件,具有相同功能。

问题1,新建标签未绑定方法,$("li").bind("click",clickLi) 只是在 document ready 的时候执行一次,新增的 li 并没有绑定 clickLi 方法:
 

复制代码 代码示例:
$(function() {
    $("li").bind("click",clickLi);
    function clickLi(e){
        //添加新标签
    }
}
 

问题2,重复绑定,$("li") 为一个数组,包括文档中所有的li元素,会导致旧标签的重复绑定,执行多次 clickLi 方法:
 

复制代码 代码示例:
$(function() {
    $("li").bind("click",clickLi);
    function clickLi(e){
        //添加新标签
        $("li").bind("click",clickLi);
    }
}   
 

所以,对于新增元素要绑定事件时,(1)新增一次,绑定一次;(2)只绑定新增元素,使用 id、class 等选择器。

另外,还可以在新增元素时,将对应的事件写到 html 中,如 onclick=""。