jquery - 将鼠标悬停更改为 on mouseenter 会破坏逻辑

Question

$('.masterTooltip').hover(function() {
    // hover over code.
    var title = $(this).attr('data-submenu');

    $(this).data('tipText', title).removeAttr('title');
    $('<p class="tooltip"></p>').text(title).appendTo('body');

    var x = $(this).offset();
    var w = $('#collapsed-menu').width();
    $('.tooltip').css({ top: x.top + 'px', left: w + 'px' }).show();
}, function() {
    // Hover out code
    $(this).attr('title', $(this).data('tipText'));
    $('.tooltip').remove();
});

我的目的是制作一个工具提示，当您将鼠标悬停在 <a> 上时，它会显示一个弹出框。 。这段代码工作得很好，但是因为我的 HTML 是动态加载的，所以无法使用悬停来工作。

$('#menuMain-ul').on('mouseenter', '.masterTooltip', function() {

});

该代码仅适用于我的动态 HTML，但是当我将这两个代码组合在一起时，它不起作用。谁能帮我使用mouseenter让它发挥作用？

Normal Demo尝试将鼠标悬停在文本上

COMBINE DEMO注意到节目。

Answer 1

您的代码很接近。问题是，当使用委托(delegate)事件处理程序时，您一次只能分配一个事件处理程序，因此您需要为 mouseleave 事件再次调用 on() 。试试这个:

$('#menuMain-ul').on('mouseenter', '.masterTooltip', function() {
    var $el = $(this);
    var title = $el.data('submenu');
    $el.data('tipText', title).removeAttr('title');
    $('<p class="tooltip"></p>').text(title).appendTo('body').css({
        top: $el.offset().top,
        left: $('#collapsed-menu').width()
    }).show();
}).on('mouseleave', '.masterTooltip', function() {
    $(this).attr('title', $(this).data('tipText'));
    $('.tooltip').remove();
});

Updated fiddle

另请注意，我稍微修改了逻辑以遵循最佳实践。