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();
    });
});

演示：Fiddle

使用jQuery添加列表项后删除它们

1 个答案: