jquery - 添加后删除元素

Question

有谁知道为什么我无法删除列表中的字母 B？

重现步骤:

1. 点击“添加到列表”按钮
2. 字母 B 已添加到列表中
3. 点击列表中的字母 B 即可删除
4. 字母 B 未从列表中删除
5. 点击字母 C 或 A
6. 字母 C 或 A 已从列表中删除

HTML:

<button id="add">Add to list</button>
<ol>
    <li>A</li>
    <li>A</li>
    <li>A</li>
</ol>

Jquery:

$(document).ready(function(){

    $("ol").append("<li>C</li");

    $("#add").click(function(){
        $("ol").append("<li>B</li>");
    });

    $("li").on("click",function(){
        $(this).remove();
    });
});

这里有 jsfiddle 中的示例.

致以诚挚的问候。

Answer 1

发生这种情况是因为当您追加新元素时事件处理程序丢失。您可以引用下面答案中的解决方案，看看如何正确执行。 jQuery how to bind onclick event to dynamically added HTML element

Here is your JSFiddle
 https://jsfiddle.net/qsh4pb5r/1/