为页面动态内容创建 qTip答案

【问题标题】：Create qTip for page dynamic content为页面动态内容创建 qTip
【发布时间】：2013-05-30 05:32:43
【问题描述】：

在动态页面内容上创建 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..

【问题讨论】：

标签： javascript jquery qtip qtip2

【解决方案1】：

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

“正确”的解决方案是将回调挂钩到 DOM 的操作中，然后在那时绑定 qtip。

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

Detect element content changes with jQuery

我的“hack”如下：

代替：

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

我这样做了：

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

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

注意：这是一个 HACK。不同计算机上的不同浏览器将以不同的速度运行... ;)

【讨论】：