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=""。

posted @ 2013-09-04 13:29  忘了滋味1219  阅读(904)  评论(2编辑  收藏  举报