我在表格中调用了qTip项目..
$('#orders_table a[rel]').each(function (){
$(this).click(function(){
return false;
});
$(this).qtip({
content: {
// Set the text to an image HTML string with the correct src URL to the loading image you want to use
text: 'Loading...',
url: $(this).attr('rel'),
// Use the rel attribute of each element for the url to load
title: {
text: 'Order Number ' + $(this).text(),
// Give the tooltip a title using each elements text
button: 'Close' // Show a close link in the title
}
},
position: {
corner: {
target: 'bottomMiddle',
// Position the tooltip above the link
tooltip: 'topMiddle'
},
adjust: {
screen: true // Keep the tooltip on-screen at all times
}
},
show: {
when: 'click',
solo: true // Only show one tooltip at a time
},
hide: 'unfocus',
style: {
tip: true,
// Apply a speech bubble tip to the tooltip at the designated tooltip corner
border: {
width: 0,
radius: 4
},
name: 'light',
// Use the default light style
width: 570 // Set the tooltip width
}
})
});
然后我有以下回调函数:
$('#orders_table a[rel]').each(function (){
$(this).qtip({
api: {
onContentLoad:function() {
$('#select').change(function(){
alert('test');
});
}
}
})
});
qTip正在加载动态内容。该动态内容有一个id为“select”的选择框。
出于某种原因,它似乎没有在qTip加载动态内容之后调用该函数。
有什么想法吗?我试过onRender和onContentUpdate,这似乎不合适。
谢谢!
答案 0 :(得分:1)
实际上它需要一种不同的特定方法 不同控件的ID。所以尝试不同的 ID表示传递一些参数并生成Id 在创建控件时有所不同 动态。
它可以解决你的问题。
答案 1 :(得分:0)
我不是100%确定这是否与我们遇到的问题相同但是当您将qTip的锚设置为ajax链接,并且ajax链接触发了自身的重新渲染时,qTip最终得到了根植于DOM,回调和定时器就停止工作了。
我们通过将qTip锚定到near-by元素来解决这个问题。希望有所帮助。
答案 2 :(得分:0)
问题不在于回调运行,它正在加载具有特定ID的内容。 ID在页面中是唯一的,因此请在此处使用类,以便在加载多个qTip时,它不会使唯一ID规则无效(导致#select
首先返回 < / em>这些元素,并非所有元素都是如此)。
你可以通过将你的选择更改为一个类来实现这一点(如果它是内容中唯一的<select>
,则可以这样做),如下所示:
<select class="mySelect">
然后在绑定时,在回调中搜索该元素,如下所示:
$('#orders_table a[rel]').each(function (){
$(this).qtip({
api: {
onContentLoad:function() {
this.elements.content.find('select.mySelect').change(function() {
alert('test');
});
}
}
});
});
另外,如果由于其他原因 {/ 3}}循环,您可以将其缩短为:
$('#orders_table a[rel]').qtip({
api: {
onContentLoad:function() {
this.elements.content.find('select.mySelect').change(function() {
alert('test');
});
}
}
});