Question

我正在尝试创建一个实用jQuery格式的用户界面列表。用户使用输入字段和添加按钮添加到列表中，并可以使用可排序功能对其列表进行排序，并且应该能够双击以从列表中删除项目。但是，双击删除仅适用于我在html中输入的原始项目。我在jQuery中添加的li对象由于某种原因没有被双击删除。有谁知道为什么？

下面的代码摘录

$(document).ready(function () {
    $('ol').sortable();
    $('#button').click(function () {
        var toAdd = $('input[name=checkListItem]').val();
        $('.list').append('<li>' + toAdd + '</div>');
    });
    $("li").dblclick(function () {
        $(this).remove();
    });
    $(document).on('.dblclick', 'li', function () {
        $(this).remove();
    });
});

Answer 1

$(".list").on('dblclick', 'li',function () {  
   $(this).remove();
});

Answer 2

好的，有两个问题（下面解决，有一个实例）：

此代码：

$("li").dblclick(function () {
    $(this).remove();
});

...只会在运行时存在的元素上挂起dblclick事件。因此，它不会将其与您稍后添加的元素挂钩。

此代码：

$(document).on('.dblclick', 'li', function () {
    $(this).remove();
});

... 尝试通过事件委派来处理它，但您不应该在.上拥有该.dblclick。

所以（使用更正常的代码/缩进样式）：

$(document).ready(function () {
    $('ol').sortable();

    $('#button').click(function () {
        var toAdd = $('input[name=checkListItem]').val();

        $('.list').append('<li>' + toAdd + '</div>');
    });

    $(document).on('dblclick', 'li', function () {
        $(this).remove();
    });
});

Live Example | Source

我在那里做的是删除我上面提到的第一个项目，因为它不适用于动态添加的元素，并修复了第二个项目（删除了.）。

为什么我不能删除新创建的jQuery？

2 个答案: