为页面动态内容创建qTip

Create qTip for page dynamic content

本文关键字：创建 qTip 动态      更新时间：2023-09-26

在动态页面内容上创建qtip的最佳方法是什么?下面是生成页面动态内容

的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 .

我发现在大型html更新中，更新DOM元素需要时间。我相信这是你的问题。当调用.qtip函数时，DOM还没有完全创建。

一个"合适的"解决方案是将一个回调挂钩到DOM的操作中，然后在那个时候绑定qtip

这里只有一个资源来弄清楚如何做到这一点:

使用jQuery检测元素内容的变化

我的"hack"如下:

代替:

$('span[title]').qtip();

我这样做了:

setTimeout("$('span[title]').qtip();", 1000);

为您的数据集使用适当的间隔。

注意:这是一个HACK。在不同的电脑上，不同的浏览器会以不同的速度运行。div;)

相关文章：