javascript - 无法从 jQuery 可排序列表中删除新添加的项目

Question

我想添加然后从 jQuery UI 可排序列表中删除元素/项目...

我做错了什么？

我已经尝试过here

<div class="add">Click me to add new item to list</div>
<ul id="sortable">
    <li class="delete">
        <div class="item">these old items can be removed by click on them...</div>
    </li>
    <li class="delete">
        <div class="item">these old items can be removed by click on them...</div>
    </li>
    <li class="delete">
        <div class="item">these old items can be removed by click on them...</div>
    </li>
</ul>

$("#sortable").sortable();

$(".add").click(function () {
    var newItem = '<li class="delete"><div class="item">these <span>new items cannot be removed</span> by click on them...</div></li>';
    $("#sortable").append(newItem);
    $("#sortable").sortable("refresh");

});

$(".delete").click(function () {
    $(this).remove();
});

Answer 1

改变

$(".delete").click(function () {
    $(this).remove();
});

至

$("#sortable").on('click', ".delete", function () {
    $(this).remove();
});

这些元素是动态插入的，并且在附加事件处理程序时并不存在，因此您必须将其委托(delegate)给在附加处理程序时确实存在的父级。