javascript - 动态元素上的 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

解决方案一

仅使用 CSS :hover使用 :after 的工具提示带有 content: attr( title ) ) 的伪元素.

参见:W3schools

警告:这并不适用于所有浏览器，例如 IE，每次都会落在后面...;)

方案二

我已经稍微重写了你的代码，以避免引用错误等。唯一缺少的是定位功能。

编辑:现在它不使用单个工具提示 <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>