Question

我正在尝试动态地将列表项添加到列表中，然后通过单击该项删除它。删除事件似乎永远不会触发。但是，如果我在静态列表上使用相同的代码，它可以正常工作。我见过类似的解决方案，但它们不起作用。

<input id="status" type="text" placeholder="Status (tab or enter)">

<br/>
Dynamic List:
<ul id="statusList"></ul> 


$('#status').keydown(function (e) {
    if (e.which == 9 || e.which == 13) {
        $('#statusList').html($('#statusList').html() + formatNewStatus(this.value));
        this.value = "";
        this.focus();
        e.preventDefault();
    }
});

$(function () {
    $('#statusList li').click(function () {
        alert('dynamicList');
        $(this).remove();
    })
});

Answer 1

这是因为click()函数仅在调用时绑定到dom中存在的元素。

live()是较旧的技术，但已弃用，将来的版本将不再支持。

您需要使用的是on()

$(function () {
    $('#statusList').on('click', 'li', function () {
        alert('dynamicList');
        $(this).remove();
    });
});

Answer 2

click函数仅绑定调用时存在的元素。请改用on()。

on（）

将一个或多个事件的事件处理函数附加到所选元素。

http://api.jquery.com/on/

Answer 3

使用http://api.jquery.com/on/

$(function () {
    $('#statusList').on("click", "li", function () {
        alert('dynamicList');
        $(this).remove();
    })
});

FIDDLE

使用jQuery删除动态添加的LI列表项

3 个答案: