jquery - 使用 jQuery 添加列表项后删除列表项

Question

在使用 jquery 添加列表项后，我在单击时删除列表项时遇到了一些问题。如果我不得不猜测为什么会发生这种情况，那是因为 jquery 可能正在查看我的原始 HTML 文档，而不是在添加列表项后更新的文档？无论哪种方式，我都无法弄清楚如何解决它。

这是我的 HTML：

<form>
        <div>
            <label for="todo">I need to:</label>
            <input type="text" id="todo" />
        </div>
        <button id ="add" type="button">Add to your to-do list!</button>
</form>
<ul>
</ul>

还有我的 jQuery：

$(document).ready(function() {
    $('#add').click(function() {
        var item = $('#todo')
        $('ul').prepend("<li>"+item.val()+"</li>");
    });
        $('li').click(function() {
        $(this).remove();
    });
});

Answer 1

由于您尝试为动态添加的元素添加事件处理程序，因此您需要使用事件委托

$(document).ready(function() {
    $('#add').click(function() {
        var item = $('#todo')
        $('ul').prepend("<li>"+item.val()+"</li>");
    });
    $('ul').on('click', 'li', function() {
        $(this).remove();
    });
});

演示：小提琴