JQuery - 似乎无法将事件绑定到动态 DOM 元素

Question

使用 JQuery UI Draggable，我正在克隆元素，因为它们会留下无序列表。由于这些对 DOM 来说是新的，我正在尝试使用 JQuery On() 方法来绑定将显示隐藏链接的事件。取消类的锚在 css 中有 display: none;。

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 fiddle，可以看到它的实际效果。

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，而该事件根本不在视图中：

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

.cancel 没有区域，你怎么能mouseout？替换为.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/