我正在尝试构建我的第一个“严肃”的网页。我刚刚开始,我坚持在新的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>");
});
谢谢!!
答案 0 :(得分:2)
您必须将.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();
});