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