Jquery动态添加的元素绑定事件的3种方法

假设我们点击li标签，弹出他的文本,如果是动态添加的li，点击是没有效果的，压根弹不出来文本。

 

下面博主分享一下为动态添加的元素绑定事件的三种方法，网上一般都是两种，我在这里多增加了一种。

 

事件案例：

 

<ul id="ul1">
    <li><a href="">世界上第三种电梯诞生了，居然是中国人发明的！</a></li>
    <li><a href="">电视名人辱骂河南人被诉 美媒：河南人常遭歧视 [评]</a></li>
    <li><a href="">杭州的哥宰客：30元路程要200 拉客到店拿回扣-搜狐新闻 [评]</a></li>
</ul>

<a id="a1" href="">添加一条</a>

 

第一种方法：给添加的元素添加onclick事件，最简单的方法

 

<script>
function liClick(event){
   alert($(event).text())
}
</script>

那么，新增的li标签应该是这样：

<script>

$(function(){

    $("#a1").click(function(){
    var li = $("<li onclick='liClick(this)'><a href='javascript:;'>我是新添加的元素</a></li>");
        
    $("#ul1").prepend(li);
     
    //阻止默认事件
    return false;
});
})

</script>

第二种：用on()方法，给它的父级、祖先元素绑定事件

代码: 绑定到父级元素

$("#ul1").on("click", "li", function(){
     alert($(this).text());
        
     return false;
})

 

或者

绑定到祖先元素document

$(document).on("click", "#ul1 li", function(){
     alert($(this).text());
        
     return false;
})

第三种:元素新增的时绑定事件

$("#a1").click(function(){
    var li = $("<li><a href='javascript:;'>我是新添加的元素</a></li>");
   

    //处理事件写到这里
    li.click(function(){
        alert($(this).text());
            
        return false;
    })

    $("#ul1").prepend(li);
        
    return false;
});

 

变量li是一个jquery对象，直接给它绑定事件，在插入到DOM中，这种也是可以的。

 

你说我想点击li里面的a标签，给它绑定事件怎么做呢？

也很简单，更平常时一样操作

代码如下：

li.find("a").click(function(){
    alert($(this).text());
    
   //阻止默认事件        
    return false;
})

好了，本教程写完了。(*^__^*)