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

您需要事件委派。

事件委托允许我们将单个事件侦听器附加到父元素，该元素将为匹配选择器的所有后代触发，无论这些后代现在是存在还是将来添加。

$("#incomplete-tasks").on("click", ".edit", function() { ... });

这里有一个很好的例子：https://learn.jquery.com/events/event-delegation/

Answer 2

结帐fiddle demo。

editMode类在编辑按钮上动态添加，点击li标签。

代码：

HTML：

<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 id='dfdf'>
        <input type="checkbox" />
        <label>Pay Bills</label>
        <input type="text" />
        <button class="edit">Edit</button>
        <button class="delete">Delete</button>
    </li>
</ul>

JS：

$(document).ready(function () {
    $('#addButton').on('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>')
    });

    $("#incomplete-tasks").on("click", ".edit", function () {
        $(this).parent().toggleClass('editMode');
    });
});

单击不适用于新元素

2 个答案: