Comment mettre à jour/actualiser les DOM élément après l'insertion de jQuery

J'essaie de comprendre comment mettre à jour l'élément LI après utilisation insertBefore fonction jQuery.

Le problème, c'est après d'ajouter de tout nouveaux éléments UL, je ne peux pas supprimer l'élément même,(avec emailTagRemove).

Voir la démo pour voir le problème:
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();
  });
  • À l'avenir, merci de poster tous les code directement dans la question.
InformationsquelleAutor Effectlab Criação de Sistemas | 2014-04-04
  1. 15

    Vous auriez besoin d'utiliser événement délégation pour ce, en raison des éléments ajoutés/supprimés de manière dynamique:

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

    Utilisation .content que le sélecteur que c'est plus efficace que l'utilisation document dans ce cas.

    jsFiddle ici

    • à l'aide de #ulEmailsCotacao au lieu de '.content' va être trop bon 😉 mais c'purement dépend et a décidé par OP
    InformationsquelleAutor dsgriffin
  2. 0

    Car celles-ci sont dynamiquement des éléments ajoutés à l'existant HTML, si vous avez besoin de déléguer à l'aide de sur gestionnaire d'événements attachement à la document.

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

    JSFiddle

    Comme @null signalé à l'aide de la statique sélecteur de au lieu de document est bon, afin d'éviter conflit parmi ces éléments dans l'ensemble du code.

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

    JSFiddle

    InformationsquelleAutor Praveen