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

JQuery - Cannot seem to bind event to dynamic DOM elements

本文关键字：绑定 动态 DOM 元素 事件 JQuery      更新时间：2023-09-26

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

<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/

FINAL EDIT WITH ANSWER掌握了如何使用on()函数的知识后，我修改了代码，使其按预期工作。

$(document).on("mouseover", ".new-campaign", function (e) {
    console.error($(this));
    $(".new-campaign").find('.cancel').show();
});
http://jsfiddle.net/og937wy7/4/

您正在将一个事件附加到.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/

相关文章：