如何在使用jQuery插入后更新/刷新DOM元素

Question

我试图找出如何在使用insertBefore函数jQuery后更新LI元素。

问题在于，添加任何新元素到UL后，我无法删除相同的元素（使用emailTagRemove）。

请查看演示以查看问题： 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();
  });

- Rodrigo Porcionato

---

将来请直接在问题中发布所有相关代码。 - cookie monster

Answer 1

由于元素是动态添加/删除的，您需要使用事件委托来完成此操作：

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

在这种情况下，使用.content作为选择器比使用document更有效。

点击此处查看jsFiddle示例

- dsgriffin

---

使用 #ulEmailsCotacao 替代 '.content' 也是可以的，但这完全取决于 OP 的决定。 - Praveen

Answer 2

因为这些元素是动态添加到现有的HTML中的，所以您需要使用on事件处理程序附加到document来委托它。

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

JSFiddle

正如@null所指出的那样，使用静态选择器而不是document是很好的，以避免整个代码中那些元素之间的冲突。

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

JSFiddle

{{链接1：JSFiddle}}

- Praveen