为页面动态内容创建qTip

时间:2013-04-30 13:12:35

标签: javascript jquery qtip qtip2

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

1 个答案:

答案 0 :(得分:0)

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

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

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

Detect element content changes with jQuery


我的“黑客”如下:

而不是:

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

我这样做了:

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

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

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