Jquery - 无法让类在动态添加的 li 元素中工作

Question

我有一个选择列表输入，允许用户选择多个项目。选择后，它将动态在我的订购列表中创建一个新的 li 项目，如下面的 HTML 代码所示。

HTML

<ol class="asmList3" id="multiol">
   <li rel="multioption1" class="asmListItem2" style="height: 20px; ">
      <span class="asmListItemLabel2">Acrylic</span>
      <a href="#" class="liRemoveItem">X</a>
   </li>
</ol>

脚本

$('.liRemoveItem').click(function(){
   alert("X is clicked");
   //remove child li
});

假设单击具有 liRemoveItem 类的 X，我希望删除子 li，但该类甚至无法用于简单的警报。我认为这是因为子 li 是动态创建的。

如果 li 是在加载时添加到 HTML 中的，而不是动态创建的，则类 liRemoveItem 可以工作。有人可以给我一个关于我做错了什么的提示吗？谢谢。

Answer 1

使用jQuery live 方法

为现在和将来与当前选择器匹配的所有元素附加一个处理程序。

   $('.liRemoveItem').live("click",function(){    
      alert("X is clicked");    //remove child li 
   });

.live() 方法能够通过使用事件委托(delegate)来影响尚未添加到 DOM 的元素:绑定(bind)到祖先元素的处理程序负责在其后代上触发的事件。传递给 .live() 的处理程序永远不会绑定(bind)到元素；相反，.live() 将特殊处理程序绑定(bind)到 DOM 树的根