JQuery 选择器范围

Question

我正在尝试创建一个带有添加和删除元素选项的简单列表，但似乎有一些关于选择器的范围规则，我在官方文档中找不到。我的 HTML，包括 jQuery 如下：

$(function() {
  $("#add").click(function() {
    let val = $("input").val();
    if (val !== "") {
      let ele = $("<li></li>").text(val);
      ele.append("<button class='rem'>X</button>");
      $("#mylist").append(ele);
      $("input").val("");
      // $(".rem").click(function(){
      //   $(this).parent().remove();
      // });
    };
  });
  $(".rem").click(function() {
    $(this).parent().remove();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="Add new item">
<button id="add">Add</button>
<ol id="mylist">
</ol>

注释部分是正常运行的部分，但位于 #add 元素的单击功能之外

Answer 1

当你调用$(".rem").click(.. jQuery将查找类为".rem"的元素并绑定这个新的点击事件。

但是，这只发生一次。如果稍后使用同一类添加元素，则这些元素不会自动获取该事件。

因此，您要做的是在创建新元素后将此事件绑定到您创建的新元素。

让我们清理一下：

<script>
function onAddClick() {
    let val = $("input").val();
    if (val !== ""){
      let ele = $("<li></li>").text(val);
      ele.click(onRemClick); <--- HERE 
      ele.append("<button class='rem'>X</button>");
      $("#mylist").append(ele);
      $("input").val("");
    };        
}
function onRemClick() {
   $(this).parent().remove();
}
$(function() {
  $("#add").click(onAddClick);
});
</script>