javascript - JQuery 选择器范围

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 5 年前。

我正在尝试创建一个简单的列表，其中包含添加和删除元素的选项，但似乎有一些关于选择器的范围规则，我在官方文档中找不到。我的 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”的元素并绑定(bind)这个新的点击事件。

但是，这只发生一次。如果您稍后添加具有相同类的元素，这些元素不会自动获取该事件。

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

让我们清理一下:

<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>