JQuery OnClick не работает дописать тег

Question

Я имею добавить <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(); 
      }); 

после Li добавляемого в уль бирке Я попробуйте удалить тег 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(); 
});