悬停新的可放置项目时附加不显示

Question

我想做的是，当有人将鼠标悬停在掉落的物品上时，他会看到附加的东西

但是追加没有显示在新项目上

我添加了悬停和附加这是附加代码

$('.mysortable').hover(function() {

$(this).append('<span class="both">BOOKMARK THIS</span>')
    $('.both').animate({opacity: 1.0}) 
}, function(){
    $('.both').fadeOut(300, function(){
        $(this).filter('.both').remove()
    })
});

我怎样才能使追加在新项目悬停时也显示？

Answer 1

我不确定你想要什么，但这也许会有所帮助。

$('.mysortable').hover(function() {

    $(this).parent().append('<li><span class="both">BOOKMARK THIS</span></li>')
        $('.both').animate({opacity: 1.0}) 
    }, function(){
        $('.both').fadeOut(300, function(){
            $(this).filter('.both').remove()
        })
    });

Answer 2

尝试使用 .on()

$('#sortable').on('mouseover mouseout', '.mysortable', function(event){
  if(event.type == 'mouseover') {
    //call your function here for append
  } else {
    //call your remove function here
  }
})

需要注意的重要一点是 jquery 中的 .on() 提供了事件的动态绑定。根据经验，没有事件 'hover' .on()，因此您必须使用两个事件。这就像，您选择了一个静态元素#sortable，并且您正在动态选择 .mysortable 个元素。

悬停新的可放置项目时附加不显示

Append not showing when hover a new droppable items

jquery

jquery-ui

append