我有一个显示项目的网站,每页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值结束加载内容。
答案 0 :(得分:3)
这是因为在页面加载后加载新元素时不会自动“qTiped”。对于常规活动,您必须使用.live()
而不是.bind()
。
之前已经解决了(从评论中判断):Problem with qTip - Tips not showing because elements load after the script。
正确的方法是(从那个答案):
$('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');
});