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

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

$('#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

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

悬停更改为鼠标中断逻辑

1 个答案: