jQuery-似乎無法將事件綁定到動態DOM元素

Question

使用JQuery UI Draggable，我正在克隆元素，因為它們留下了無序的列表。 由於這些是DOM的新功能，因此我嘗試使用JQuery On（）方法綁定一個事件，該事件將顯示隱藏的鏈接。 具有取消類的錨點display: none; 在CSS中。

HTML

<ul class="current-campaign">
    <li class="draggable">One <a class="pull-right cancel" href="#">
          <i style="color:red">Icon</i>
        </a>

    </li>
</ul>
<ul class="new-campaign sortable"></ul>

JQuery的

$(".sortable").sortable();
$(".draggable").draggable({
    connectToSortable: ".sortable",
    helper: "clone",
});

$(".current-campaign").on("mouseout", ".cancel", function () {
    $(".cancel").show();
});

確實很難弄清楚為什么鏈接離開無序列表后卻不顯示。 這是一個JS小提琴，可以實際使用它。

http://jsfiddle.net/og937wy7/

使用答案進行最終編輯掌握了如何使用on（）函數的知識后，我對代碼進行了修正，使其可以按預期工作。

$(document).on("mouseover", ".new-campaign", function (e) {
    console.error($(this));
    $(".new-campaign").find('.cancel').show();
});

http://jsfiddle.net/og937wy7/4/

Answer 1

您正在將事件附加到.cancel ，該事件在.cancel中根本沒有：

$(".current-campaign").on("mouseout", ".cancel", function () {
    $(".cancel").show();
});

.cancel沒有區域時，如何將mouseout .cancel ？ 用.draggable替換它：

$(".current-campaign").on("mouseout", ".draggable", function () {
    $(".cancel").show();
});

我猜您正在尋找要在懸停時顯示的取消信息，當您離開時應將其隱藏。 因此，將您的代碼更改為：

$(".current-campaign, .new-campaign").on("mouseout", ".draggable", function () {
    $(".cancel").hide();
}).on("mouseover", ".draggable", function () {
    $(".cancel").show();
});

我還要告訴您這不是正確的方法，因為它會影響所有.cancel 。 因此，您可能需要使用$(this).find() ：

$(".current-campaign, .new-campaign").on("mouseout", ".draggable", function () {
    $(this).find(".cancel").hide();
}).on("mouseover", ".draggable", function () {
    $(this).find(".cancel").show();
});

小提琴： http : //jsfiddle.net/dpojx7so/

但是，一切都可以使用CSS本身完成！！！

您只需要添加此CSS，而不是整個JS：

.sortable:hover .cancel {
    display: inline;
}

小提琴： http : //jsfiddle.net/mx58stx3/