克隆后按钮不起作用

Question

我正在将一个列表项克隆到另一个列表中。但是，none 的克隆按钮在新列表中有效。我很难过。有什么想法吗？

JSfiddle: here

脚本：

    $(this).find(".add-playlist").on('click', function (ev) {
        var $clone = $(this).parent().parent().parent().clone(true);
        var $newbuttons = '<button class="btn btn-default clone" role="button">Clone</button><button class="btn btn-default delete" role="button">Delete</button>';
        ev.preventDefault();
        $clone.find('.tn-overlay').css({'top': '100%'}).end().find('.tn-buttons').html($newbuttons).end().appendTo($('#pl #da-thumbs')).hoverdir();
     });

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

Answer 1

使用 event delegation 将事件附加到动态插入的元素。

Updated Example

$(document).on('click', '.delete', function () {
    $(this).parent().parent().parent().remove();
});

附带说明一下，您应该使用 .closest() 而不是链接多个 .parent() 方法。

像这样的东西会起作用：

$(document).on('click', '.delete', function () {
    $(this).closest('.tn').remove();
});

克隆后按钮不起作用

Buttons not working after cloning

jquery

button

clone