Javascript jQuery事件不'；追加后不工作_Javascript_Jquery

Javascript jQuery事件不'；追加后不工作

javascript jquery

Javascript jQuery事件不'；追加后不工作,javascript,jquery,Javascript,Jquery,我正试图建立我的第一个“严肃”的网页。我刚刚开始，我坚持在新的div部分应用旧的事件侦听器。我想在$（“.novo”）.append（“new div..” 我曾尝试在（）函数上使用，但似乎不起作用。我在添加新列表时也遇到了问题。它会添加到当前的每个div。我只想在单击的div上添加它 <body> <button class="novo">Novo</button> <div class="container"> <div cl

我正试图建立我的第一个“严肃”的网页。我刚刚开始，我坚持在新的div部分应用旧的事件侦听器。我想在

$（“.novo”）.append（“new div..”

我曾尝试在（）函数上使用，但似乎不起作用。我在添加新列表时也遇到了问题。它会添加到当前的每个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”）。在（“单击”，“li”，函数（）上）{
$（此）.toggleClass（“已完成”）；
});
$（“ul”）。在（“单击”，“跨距”，功能（事件）{
$（this.parent（）.fadeOut（500，function（））{
$（this.remove（）；
});
event.stopPropagation（）；
});
$（“输入[type='text']”）。按键（函数（键）{
if（key.which==13）{
var todoText=$（this.val（）；
$（“ul”）。追加（“”+todoText+””；
}
});
$（“#表单”）。单击（函数（）{
$（“input[type='text']）。fadeToggle（150）；
});
$（“.novo”）。在（“单击”，函数（）{
$（“.container”）.append（“待办事项清单沙巴”；
});

谢谢

您必须将

.on（）

绑定移动到更高的级别。这是因为当您将

.on（）

绑定应用于

元素时，所述元素必须在运行时在DOM中可用。这意味着通过点击

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

中的事件委派。那会有帮助的

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