![](/img/trans.png)
[英]Why does the qtip tooltip appear on other buttons that do not share the same id?
[英]qTip tooltip does not appear, jQuery
我有一個顯示項目的網站,每頁12個項目,我可以使用jquery在頁面上進行分頁。 在同一頁面上,我使用qTip實現了工具提示功能。
將鼠標懸停在項目上會顯示一些信息。 在我使用分頁器轉到下一頁之前,該方法一直有效。
分頁會重新加載內容。 但是它具有與刷新頁面時相同的結構。
這是我的代碼:
$(document).ready(function() {
$(".cornerize").corner("5px");
$('a#verd').live('click', exSite);
$("a.tp").live('click', thumpsUp);
$("a#next").click(getProgramms);
$("a#previous").click(getProgramms);
$("a#page").each(function() {
$(this).click(getProgramms);
});
$('a.ppname[rel]').each(function(){
$(this).qtip( {
content : {url :$(this).attr('rel')},
position : {
corner : {
tooltip : 'leftBottom',
target : 'rightBottom'
}
},
style : {
border : {
width : 5,
radius : 10
},
padding : 10,
textAlign : 'center',
tip : true,
name : 'cream'
}
});
});
});
html / dom不變:
<a class="ppname" rel="link" href="#">...</a>
qTip從每個a.ppname中取rel值端加載內容。
發生這種情況是因為在頁面加載后加載新元素時,它們不會自動“ qTiped”。 對於常規事件,您必須使用.live()
而不是.bind()
。
之前已解決此問題(從評論中判斷): qTip問題-提示未顯示,因為元素在腳本之后加載 。
正確的方法是(根據該答案):
$('a.ppname[rel]').live('mouseover', function() {
var target = $(this);
if (target.data('qtip')) { return false; }
target.qtip({
overwrite: false, // Make sure another tooltip can't overwrite this one without it being explicitly destroyed
show: {
ready: true // Needed to make it show on first mouseover event
},
content : {url :$(this).attr('rel')},
position : {
corner : {
tooltip : 'leftBottom',
target : 'rightBottom'
}
},
style : {
border : {
width : 5,
radius : 10
},
padding : 10,
textAlign : 'center',
tip : true,
name : 'cream'
});
target.trigger('mouseover');
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.