動態元素上的jQuery事件不起作用

Question

我正在嘗試通過將懸停事件處理程序附加到具有title屬性的元素來創建自定義工具提示。

代碼適用於頁面加載時的元素，但是當我嘗試合並動態元素時，當我的鼠標離開目標元素時，工具提示不會消失。

顯示工具提示

Urb.showTooltip = function() {
    var $element = $(this);
    var $tooltip = $element.data('tooltip');
    var $tip = $element.attr('title');

    console.log('show');

    if(!$tooltip) {
        // create a tooltip element
        $tooltip = $('<div />');
        $tooltip.addClass('tooltip');
        $tooltip.text($tip);
        Urb.$body.append($tooltip);

        // position the tooltip
        Urb.positionTooltip($tooltip, $element);
        $element.data('tooltip', $tooltip);

        // activate custom tooltip and deactivate browser tooltip
        $tooltip.addClass('active');
        $element.attr('tooltip', $tip);
        $element.removeAttr('title');
    } else {
        // position and activate custom tooltip
        Urb.positionTooltip($tooltip, $element);
        $tooltip.addClass('active');
    }
};

隱藏工具提示

Urb.hideTooltip = function() {
    var $element = $(this);
    var $tooltip = $element.data('tooltip');

    console.log('hide');

    if($tooltip){
        $tooltip.removeClass('active');
    }
};

注意： Urb只是我作為項目命名空間創建的全局對象。

所以，沒有什么可瘋狂的。 我最初將工具提示邏輯附加到jQuery的.hover()函數：

$('[title]').hover( Urb.showTooltip, Urb.hideTooltip );

這很好用，但是現在，當我嘗試將事件附加到動態元素時， Urb.hideTooltip根本沒有被調用，因為它甚至沒有“隱藏”到我的控制台。

Urb.$body.on('mouseover', '[title]', Urb.showTooltip);
Urb.$body.on('mouseleave', '[title]', Urb.hideTooltip);

注意： Urb.$body引用$('body')

為什么不調用hideTooltip函數？ 我錯過了什么？

Answer 1

解決方案1

使用僅限CSS :hover使用:after content: attr( title ) ) :hover工具提示:after帶有content: attr( title ) )偽元素:after content: attr( title ) ) 。

見： W3schools

警告 ：這不是適用於所有瀏覽器，例如IE，每次都會落后......;）

解決方案2

我稍微重寫了你的代碼，以避免引用錯誤等。唯一缺少的是定位功能。

編輯：現在它不使用單個工具提示<div> ，但是在第一次懸停時為每個項目設置工具提示<div> ，刪除title並在使用它創建工具提示<div> 。

看一看：

 var Urb = {}; Urb.showTooltip = function() { // Get current element var $element = $(this); // Get tooltip data (if it's there) var tooltipText = $element.data('tooltip'); // Get title for backup var tip = $element.attr('title'); console.log('show'); // If title is still set, set it to tooltip data and remove title attribute if( typeof tip !== undefined && tip !== false) { // Remove title attribute $element.removeAttr('title'); // Create new tooltip div var $newTip = $('<div />').addClass('tooltip').text( tip ); // Append it to the element $element.append( $newTip ); } $element.find('div.tooltip').addClass('active'); }; Urb.hideTooltip = function() { console.log('hide'); // Empty tooltip div and deactivate it $(this).find('div.tooltip').removeClass('active'); }; var last_item_nr = 3; function addItem() { var next_nr = ++last_item_nr; $elm = $('<div></div>'); $elm .html('Item ' + next_nr + '<div class="tooltip">Tooltip for item ' + next_nr + '</div>' ) .hover( Urb.showTooltip, Urb.hideTooltip ); $('#items').append( $elm ); console.log( 'Added item ' + next_nr ); } $( document ).ready(function() { Urb.$body = $('body'); $('#items > div').hover( Urb.showTooltip, Urb.hideTooltip ); }); 

 #items > div { position: relative; float: left; clear: left; width: 200px; border: 1px solid #eee; } #items > div > .tooltip { position: absolute; top: 0px; left: 100%; background-color: #ccc; opacity: 0; } #items > div > .tooltip.active { opacity: 1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick="addItem();">Add item</button> <div id="items"> <div title="Tooltip for item 1">Item 1</div> <div title="Tooltip for item 2">Item 2</div> <div title="Tooltip for item 3">Item 3</div> </div> 

Answer 2

天哪，我不敢相信我沒想到這個！

在我的showTooltip函數中，我刪除了title屬性！

真是個傻瓜！！

$element.removeAttr('title');

因此，當工具提示顯示時，動態元素檢查停止工作。 我注釋掉了這行代碼並且它有效。

現在，我只需要弄清楚如何阻止瀏覽器工具提示顯示。

更新：

事實證明我確實需要刪除title屬性才能禁用瀏覽器工具提示。 所以，我對動態選擇器進行了一些更改。

 // showTooltip
 $element.attr('data-title', $tip);
 $element.removeAttr('title');

 // window.load
 Urb.$body.on('mouseover', '[title], [data-title]', Urb.showTooltip);
 Urb.$body.on('mouseleave', '[title], [data-title]', Urb.hideTooltip);