0

我正在尝试创建一个实用 jQuery 格式的用户界面列表。用户使用输入字段和添加按钮添加到列表中，并且可以使用可排序功能对列表进行排序，并且应该能够双击以从列表中删除项目。但是，双击删除仅适用于我在 html 中输入的原始 ol li 项目。由于某种原因，我在 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();
    });
});
4

2 回答 2

0 
$(".list").on('dblclick', 'li',function () {  
   $(this).remove();
});
于 2013-03-27T19:16:23.103 回答
0

好的，有两个问题（下面解决，用一个活生生的例子）：

这段代码：

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

实例| 来源

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

于 2013-03-27T19:17:40.670 回答