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小提琴，可以看到它在行动。

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();
});

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

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

1 个答案: