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

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

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

请参阅演示以查看问题： http ： //jsfiddle.net/HsRfH/

 Please, insert one or more emails:  
 
 
  
 
  

---

  //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(); $('
' + email + 'x
').insertBefore('.liEmailTagNew'); $('.emailInputTag').val(""); }; $('.emailTagRemove').click(function () { var email = $(this).parents("li"); email.remove(); }); 

Answer 1

由于要动态添加/删除元素，您需要为此使用事件委派 ：

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

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

jsFiddle在这里

Answer 2

因为这些是动态添加到现有HTML的元素 ，所以您需要使用事件处理程序附件将其委托给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