的jQuery的onclick不工作的附加標籤

Question

我有追加密切類span標籤<li>標籤

HTML代碼

<ul id="keyword"> 

</ul> 

jQuery的

$("#btnadd").click(function() { 
       addkey = document.getElementById("txtaddkey").value; 
       if(addkey!=""){ 
       $('#keyword').append('<li><span>'+addkey+'</span><span class=\"amountin\"><a href=\"#\">$0.05</a> $ <input type=\"text\" maxlength=\"5\"/></span><span class=\'close ui-icon \'></span></li>'); 
       $('#txtaddkey').val(''); 
       } 
      }); 
    $(".close").click(function(){ 
       $(this).parent().remove(); 
      }); 

李後追加在UL標籤我嘗試通過點擊關閉圖標刪除li標籤，但事件不起作用。

您能否請任何幫助我。

Answer 1

你可以直接分配click到新創建的元素：

$("#btnadd").click(function() { 
      // Made it a local variable by using "var" 
      var addkey = document.getElementById("txtaddkey").value; 
      if(addkey!=""){ 
       $('<li><span>'+addkey+'</span><span class=\"amountin\"><a href=\"#\">$0.05</a> $ <input type=\"text\" maxlength=\"5\"/></span><span class=\'close ui-icon \'></span></li>') 
        .find('.close').click(function(){ 
         $(this).parent().remove(); 
        }) 
        .end().appendTo('#keyword'); 
       $('#txtaddkey').val(''); 
      } 
     }); 

，或者如果有將是其中的一些，最好使用.delegate()如所見in @Nick's answer。

Answer 2

使用.delegate()這裏，像這樣：

$("#keyword").delegate(".close", "click", function(){ 
    $(this).parent().remove(); 
}); 

.delegate()作品上添加一個事件處理程序#keyword（在<ul>）的監聽事件冒泡......它適用於當前和新添加的.close元素在它下面。效率較低版本是這樣的：

$(".close").live("click", function(){ 
    $(this).parent().remove(); 
});