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

最佳答案

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

10-06 05:26
查看更多