Come aggiornare/aggiornare l'elemento DOM dopo l'inserimento jQuery

Question

Cerco di capire come aggiornare l'elemento LI dopo l'uso insertBefore jQuery.

Il problema è dopo aggiungere nuovi elementi a UL, non è possibile eliminare l'elemento stesso, (con emailTagRemove).

vedere la demo per vedere il problema: http://jsfiddle.net/HsRfH/

<div class="content"> 
    <span class="">Please, insert one or more emails: </span> 
    <br /> 
    <ul id="ulEmailsCotacao" class="ulEmailsCotacao"> 
     <li class="liEmailTagNew"> 
      <input type="text" class="emailInputTag" name="" value="" /> 
     </li> 
    </ul> 
</div> 

---

//if enter, tab or space, add new value 
    $('.emailInputTag').keydown(function (e) { 
     var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0; 
     if (key === 13 || key === 9 || key === 32) { 
      addEmail(); 
     } 
    }); 

    addEmail = function() { 
     var email = $('.emailInputTag').val().trim(); 
     $('<li class="liEmailTagChoiced">' + email + '<a id="del" class="emailTagRemove">x</a></li>').insertBefore('.liEmailTagNew'); 
     $('.emailInputTag').val(""); 
    }; 

    $('.emailTagRemove').click(function() { 
     var email = $(this).parents("li"); 
     email.remove(); 
    }); 

Answer 1

Avresti bisogno di utilizzare event delegation per questo, a causa di elementi per essere aggiunti/rimossi in modo dinamico:

$('.content').on('click', '.emailTagRemove', function() {     
     var email = $(this).parents("li"); 
     email.remove(); 
}); 

Utilizzare .content come selettore come È più efficiente dell'uso di document in questo caso.

jsFiddle here

Answer 2

Perché quelli sono elementi aggiunti in modo dinamico a quello esistente HTML, quindi è necessario delegare utilizzando attaccamento gestore on evento con il document.

$(document).on('click','.emailTagRemove', function() {     
       var email = $(this).parents("li"); 
       email.remove(); 
      }); 

JSFiddle

Come @null indicate utilizzando il selettore statica anziché documento è buono, per evitare conflitti fra gli elementi in intero codice.

$('#ulEmailsCotacao').on('click','.emailTagRemove', function() {     
       var email = $(this).parents("li"); 
       email.remove(); 
      }); 

JSFiddle