javascript - 单击不适用于新元素

Question

遇到问题 "$(".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>

Answer 1

您需要事件委托(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/