jQuery-似乎无法将事件绑定到动态DOM元素 [英] JQuery - Cannot seem to bind event to dynamic DOM elements

问题描述

使用JQuery UI Draggable，我正在克隆元素，因为它们留下了无序列表.由于这些是DOM的新功能，因此我尝试使用JQuery On()方法绑定一个事件，该事件将显示隐藏的链接.类别为cancel的锚点在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小提琴，可以看到它的实际效果.

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/

解决方案

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

Using JQuery UI Draggable, I am cloning elements as they leave an unordered list. As these are new to the DOM, i'm trying to use the JQuery On() method to bind an event which will show a hidden link. The anchor with the class cancel has display: none; in the 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();
});

Really having trouble figuring out why the link doesn't show up when it leaves the unordered list. Here's a JS fiddle to see it in action.

http://jsfiddle.net/og937wy7/

FINAL EDIT WITH ANSWER Armed with the knowledge of how to use the on() function, I fixed up my code so it's working as I intended.

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

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

解决方案

You are attaching an event to .cancel, which is not at all in the view:

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

How can you mouseout, when .cancel doesn't have an area? Replace it with .draggable:

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

I guess you are looking for the cancel to be shown once you hover and when you come away, it should hide. So change your code to:

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

I would also tell this is not a right way, because, it affects all the .cancel. So you might need to use $(this).find():

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

Fiddle: http://jsfiddle.net/dpojx7so/

But, everything can be done using CSS itself!!!

You just need to add this CSS, instead of the whole JS:

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

Fiddle: http://jsfiddle.net/mx58stx3/

这篇关于jQuery-似乎无法将事件绑定到动态DOM元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！