遇到问题 "$(".edit").on('click', function(){$(this).parent().toggleClass('editMode');"- 它不适用于新元素。 ..
$('#addButton').click(function(){
$("#incomplete-tasks").append('<li><input type="checkbox"><label>' + $('#new-task').val() + '</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>')
});
$(".edit").on('click', function(){
$(this).parent().toggleClass('editMode');
});
<p>
<label for="new-task">Add Item</label>
<input id="new-task" type="text">
<button id="addButton">Add</button>
</p>
<h3>Todo</h3>
<ul id="incomplete-tasks">
<li>
<input type="checkbox">
<label>Pay Bills</label>
<input type="text">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</li>
最佳答案
您需要事件委托(delegate)。
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
$("#incomplete-tasks").on("click", ".edit", function() { ... });
这里有一个很好的例子:https://learn.jquery.com/events/event-delegation/
关于javascript - 单击不适用于新元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29215894/