將鼠標懸停更改爲mousenter中斷邏輯

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

另外請注意，我修改了邏輯稍微遵循最佳實踐。