[英]jQuery events on dynamic elements don't work
I'm trying to create a custom tooltip by attaching hover event handlers to elements with a title
attribute. 我正在尝试通过将悬停事件处理程序附加到具有title
属性的元素来创建自定义工具提示。
The code works on elements at page load, but when I try to incorporate dynamic elements, the tooltip is not disappearing when my mouse leaves the target element. 代码适用于页面加载时的元素,但是当我尝试合并动态元素时,当我的鼠标离开目标元素时,工具提示不会消失。
Show Tooltip 显示工具提示
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');
}
};
Hide Tooltip 隐藏工具提示
Urb.hideTooltip = function() {
var $element = $(this);
var $tooltip = $element.data('tooltip');
console.log('hide');
if($tooltip){
$tooltip.removeClass('active');
}
};
Note: Urb
is just a global object I've created as a namespace for my project. 注意: Urb
只是我作为项目命名空间创建的全局对象。
So, nothing crazy going on there. 所以,没有什么可疯狂的。 I originally attached the tooltip logic to jQuery's .hover()
function: 我最初将工具提示逻辑附加到jQuery的.hover()
函数:
$('[title]').hover( Urb.showTooltip, Urb.hideTooltip );
That worked just fine, but now, when I try to attach the events to dynamic elements, the Urb.hideTooltip
is not getting called at all, as it doesn't even log "hide" to my console. 这很好用,但是现在,当我尝试将事件附加到动态元素时, Urb.hideTooltip
根本没有被调用,因为它甚至没有“隐藏”到我的控制台。
Urb.$body.on('mouseover', '[title]', Urb.showTooltip);
Urb.$body.on('mouseleave', '[title]', Urb.hideTooltip);
Note: Urb.$body
is reference to $('body')
注意: Urb.$body
引用$('body')
Why doesn't the hideTooltip
function get called? 为什么不调用hideTooltip
函数? What am I missing? 我错过了什么?
Solution 1 解决方案1
Use CSS-only :hover
tooltips using :after
pseudo-elements with content: attr( title ) )
. 使用仅限CSS :hover
使用:after
content: attr( title ) )
:hover
工具提示:after
带有content: attr( title ) )
伪元素:after
content: attr( title ) )
。
Warning : this is not for all browsers out there, like IE, who gets left behind everytime... ;) 警告 :这不是适用于所有浏览器,例如IE,每次都会落后......;)
Solution 2 解决方案2
I've rewritten your code somewhat, to avoid referencing errors, etc. The only thing missing is the positioning function. 我稍微重写了你的代码,以避免引用错误等。唯一缺少的是定位功能。
EDIT: Now it doesn't use a single tooltip <div>
, but sets up tooltip <div>
's for each item on first hover, by removing the title
and after using it to create the tooltip <div>
. 编辑:现在它不使用单个工具提示<div>
,但是在第一次悬停时为每个项目设置工具提示<div>
,删除title
并在使用它创建工具提示<div>
。
Have a look: 看一看:
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>
OMG, I can't believe I didn't think of this!!! 天哪,我不敢相信我没想到这个!
In my showTooltip
function, I am removing the title
attribute! 在我的showTooltip
函数中,我删除了title
属性!
What an idiot!! 真是个傻瓜!!
$element.removeAttr('title');
So, when the tooltip showed, the dynamic element check stopped working. 因此,当工具提示显示时,动态元素检查停止工作。 I commented out that line of code and it works. 我注释掉了这行代码并且它有效。
Now, I just have to figure out how to prevent the browser tooltip from showing. 现在,我只需要弄清楚如何阻止浏览器工具提示显示。
Update: 更新:
Turns out I did need to remove the title
attribute in order to disable browser tooltips. 事实证明我确实需要删除title
属性才能禁用浏览器工具提示。 So, I made a few changes to my dynamic selector. 所以,我对动态选择器进行了一些更改。
// 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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.