Question

我正在尝试构建我的第一个“严肃”的网页。我刚刚开始，我坚持在新的div部分上应用旧的事件监听器。我想在$(".novo").append("new div ..")上应用所有旧听众我试过使用on（）函数，但它似乎不起作用。而且我在添加新列表时也遇到了问题。它增加了每个现有的div。我想只在点击的div上添加它。

<body>
  <button class="novo">Novo</button>
<div class="container">
  <div class="grupa">
    <h1>To-Do List<span id="form"><i class="fas fa-edit"></i></span></h1>
    <input type="text" placeholder="Add New Todo">
    <ul>
      <li><span><i class="fas fa-trash-alt"></i></span> Sabah</li>
    </ul>
  </div>
  <script type="text/javascript" src="Assets\JS\projekt.js">
  </script>
</body>

JS：

$("ul").on("click", "li", function(){
  $(this).toggleClass("completed");
});
$("ul").on("click", "span", function(event){
  $(this).parent().fadeOut(500, function(){
    $(this).remove();
    });
  event.stopPropagation();
});
$("input[type='text']").keypress(function(key){
  if(key.which === 13){
  var todoText = $(this).val();
  $("ul").append("<li><span><i class='fas fa-trash-alt'></i></span> " + todoText + "</li>");
  }
});
$("#form").click(function(){
    $("input[type='text']").fadeToggle(150);
});
$(".novo").on("click", function(){
  $(".container").append("<div class='grupa'><h1>To-Do List<span id='form'><i class='fas fa-edit'></i></span></h1><input type='text' placeholder='Add New Todo'><ul><li><span><i class='fas fa-trash-alt'></i></span> Sabah</li></ul></div>");
});

谢谢!!

Answer 1

您必须将.on()绑定移至更高级别。这是因为当您将.on()绑定应用于<ul>元素时，所述元素必须在运行时在DOM中可用。这意味着，通过单击<ul>按钮触发的新添加的.novo将不会绑定任何JS事件。

在这种情况下，您应该将绑定移动到运行时已存在的父元素，例如.container元素。重构代码，你可以这样做：

$(".container").on("click", ".grupa ul li", function(){
  $(this).toggleClass("completed");
});

$(".container").on("click", ".grupa ul span", function(event){
  $(this).parent().fadeOut(500, function(){
    $(this).remove();
    });
  event.stopPropagation();
});

追加后jQuery事件不起作用

1 个答案: