Question

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

＆＃13;

$(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();
  });
});

＆＃13;

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

＆＃13;

注释部分是正常运行的部分，但#add元素的click函数之外的部分不起作用。

Answer 1

当你调用$(".rem").click(..时，jQuery会查找带有类＆＃34; .rem＆＃34;的元素。并绑定这个新的点击事件。

然而，这只发生过一次。如果您稍后在同一课程中添加元素，则不会自动获取该事件。

所以你想要做的就是在你创建它之后将这个事件绑定到你创建的新元素。

让我们清理一下：

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

JQuery选择器范围

1 个答案: