Question

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

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的新手，很抱歉，如果答案很明显并感谢您的帮助：）

Answer 1

使用事件委派。

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

});

事件句柄仅附加到DOM中定义点击事件的方式中的元素。

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

使用jQuery克隆时Button不起作用

1 个答案: