jquery onclick ne fonctionne pas pour les balises append

Question

J'ai ajouter tag <li> avec balise span class proche

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

après li AJOUT dans la balise ul je suis essayez de supprimer la balise li en cliquant sur l'icône de fermeture mais l'événement ne fonctionne pas.

Pourriez-vous s'il vous plaît m'aider.

Answer 1

Vous pouvez assigner le click directement au nouveau créer élément:

$("#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(''); 
      } 
     }); 

ou s'il y aura plusieurs d'entre eux, il vaut mieux utiliser .delegate() comme vu in @Nick's answer.

Answer 2

Utilisez .delegate() ici, comme ceci:

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

.delegate() fonctionne en ajoutant un gestionnaire d'événements sur #keyword (le <ul>), qui écoute les événements à bouillonner ... Fonctionnant sur .close éléments actuels et nouvellement ajoutés dessous. La version moins efficace ressemble à ceci:

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