在动态页面内容上创建qTip2的最佳方法是什么。以下是用于生成页面动态内容的jquery
function display(view) {
if (view == 'list') {
$('.product-grid').attr('class', 'product-list');
$('.product-list > div').each(function(index, element) {
html = '<div class="right">';
bla bla
html += ' <div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
html += '</div>';
$(element).html(html);
});
$('.display').html('<span class="displaytext"><span class="" title="<?php echo $text_grid; ?>"></span></span>');
$.cookie('display', 'list');
} else {
$('.product-list').attr('class', 'product-grid');
$('.product-grid > div').each(function(index, element) {
html = '';
html += '<div class="name">' + $(element).find('.name').html() + '</div>';
html += '<div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
$(element).html(html);
});
$('.display').html('<span class="displaytext"><span class="listtext" title="<?php echo $text_list; ?>"></span>');
$.cookie('display', 'grid');
}
$('span[title]').qtip(); **// I have called the qTip2 function here but it only activates for $('.display').html(); the qtip2 doesn't activate for $(element).html(html);**
}
view = $.cookie('display');
if (view) {
display(view);
} else {
display('grid');
}
我还试图做一个回调函数,但我不确定应该是什么,因为我还是Javascript的新手。我不想更改javascript代码,我只是想创建qtip2函数,以便可以创建所有已加载内容的qTip2 ..
答案 0 :(得分:0)
我在大型html更新中发现,DOM元素需要更新时间。我相信这是你的问题。调用.qtip
函数时,尚未创建DOM。
“正确”的解决方案是将回调挂钩到DOM的操作中,然后在那时绑定qtip。
这只是一个资源来弄清楚如何做到这一点:
Detect element content changes with jQuery
我的“黑客”如下:
而不是:
$('span[title]').qtip();
我这样做了:
setTimeout("$('span[title]').qtip();", 1000);
为数据集使用适当的间隔。
注意:这是一个HACK。不同计算机上的不同浏览器将以不同的速度运行......;)