使用 jQuery 克隆时按钮不起作用 [重复]答案

【问题标题】：Button does not work when cloned using jQuery [duplicate]使用 jQuery 克隆时按钮不起作用 [重复]
【发布时间】：2016-12-10 07:35:30
【问题描述】：

我的按钮有问题。所以我想将项目从一个列表克隆到另一个列表。我还想在传递到另一个列表时添加一个按钮。单击按钮时出现问题。什么都没发生。项目不会被移除。你知道为什么会这样吗？

jQuery：

    $( function() {
    $( "#sortable1").sortable({
        connectWith: ".connectedSortable",
        items: "li:not(.ui-state-disabled)",
        remove: function(event, ui) {
            ui.item.clone().append( "<button class='cancelBut'>Cancel</button>" ).appendTo('#sortable13');
            $(this).sortable('cancel');
        }
    }).disableSelection();

    $( "#sortable13").sortable({
        connectWith: ".connectedSortable",
        items: "li:not(.ui-state-disabled)"
    }).disableSelection();

       $( ".cancelBut" ).click(function() {
        //$(this).parent().remove();
        alert("It works");
    });
    });

HTML：

    <div id="items" style="display: none">
    <ul id="sortable1" class="connectedSortable">
        <li class="ui-state-default ui-state-disabled">Items</li>
        <li class="ui-state-default"><p>Item 1</p></li>
    </ul>
</div>

<ul id="sortable13" class="connectedSortable">
    <li class="ui-state-default ui-state-disabled">Drag Here</li>
</ul>

我是 jQuery 新手，如果答案很明显，我很抱歉，感谢您的帮助 :)

【问题讨论】：

您需要使用委托点击处理程序，因为当页面加载时.cancelBut 元素不在 DOM 中，例如：$(document).on('click', '.cancelBut', function() { ...。有关详细信息，请参阅重复的问题
@RoryMcCrossan 谢谢你成功了！

标签： javascript jquery html jquery-ui button

【解决方案1】：

使用事件委托。

$('.body').on('click', '.cancelBut', function() {

});

事件句柄仅附加到DOM 中存在的元素，就像您定义点击事件的方式一样。

在您的情况下，您遇到了未绑定处理程序的确切情况。通过使用事件委托，事件将冒泡到绑定click 的元素（在本例中为body）并调用克隆元素的点击。

【讨论】：