click事件不觸發對新創建的列表項

Question

我有兩個列表，當你點擊第二個名單上的第一個列表中刪除的第一個項目，並添加到第二個列表，但是當我點擊新創建的列表項它不」爲什麼呢？ jsFiddle demo

$('#SearchList li a').bind("click", function() { 
    var $this = $(this).unwrap('<a href="#"></a>').remove().text(); 

    var $that = $('#Search li:first').remove().text(); 

    $('<li>' + $this + '</li>').insertBefore('#Search li:first') 

    $('#SearchList').append('<li><a href="#">' + $that + '</a></li>'); 
}); 

<ul id="Search"> 
    <li>Electronics</li> 
    <li>Image</li> 
</ul> 

<ul id="SearchList">       
    <li><a href="#">Interests</a></li> 
    <li><a href="#">Entertainment</a></li> 
    <li><a href="#">Clothing</a></li> 
    <li><a href="#">Pharmacy</a></li> 
    <li><a href="#">Home & Garden</a></li> 
</ul> 

Answer 1

.bind()僅影響元素已經在DOM，要使用.delegate()或.on()（如果你正在使用jQuery 1.7+）：

$('#SearchList').on("click", " li a", function() { 
    var $this = $(this).unwrap('<a href="#"></a>').remove().text(); 

    var $that = $('#Search li:first').remove().text(); 

    $('<li>' + $this + '</li>').insertBefore('#Search li:first') 

    $('#SearchList').append('<li><a href="#">' + $that + '</a></li>'); 
}); 

注：.live()從jQuery 1.7開始折舊，所以最好使用.on()或.delegate()。

這裏是（使用jQuery 1.7）上述溶液的的jsfiddle：http://jsfiddle.net/jasper/pgwdv/

有些文檔鏈接：

• .on()：http://api.jquery.com/on
• .delegate()：http://api.jquery.com/delegate

Answer 2

您應該嘗試使用.live而不是.bind。

Answer 3

可以使用live功能，以保持點擊（及其他）積極處理動態添加內容。

而不是

$('#SearchList li a').bind("click", function() { 

使用

$('#SearchList li a').live("click", function() {