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;
})

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