Question

我尝试弄清楚如何在使用insertBefore函数jQuery后更新元素LI。

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

<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

由于要动态添加/删除元素，您需要使用event delegation：

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

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

<强> jsFiddle here

Answer 2

因为这些动态添加了现有HTML 的元素，所以您需要使用on事件处理程序附件将其委托给document。

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

<强> JSFiddle

由于@null指向使用静态选择器而不是文档是好的，是为了避免这些元素中的冲突整个代码。

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

JSFiddle

插入jQuery后如何更新/刷新DOM项目

2 个答案: