将 qtip（jQuery 插件）应用于页面上新加载的项目

Question

首先，这是 qtip，一个 jQuery 插件：http://craigsworks.com/projects/qtip2/ 基本上它可以制作漂亮的工具提示。

我在 mysql 数据库结果页面上使用 qtip，当我第一次加载页面时，qtip 工作得很好。但是，我的页面上有排序链接，导致 div 内的信息完全改变（使用 AJAX 将新信息放入 div，方法是创建一个新的 mysql 查询来处理数据并将其放入表中以替换表这页纸）。当我单击排序按钮时，除了 qtips 消失之外，一切正常。我在图像标题（“标题”）上使用 qtips，所以当我翻转排序表上的图像时，它会回到正常的工具提示。

我认为错误在于 $(document).ready 意味着 qtip 内容只会在第一页加载时加载，因此当我更改表格时，所有 qtip 都会消失。我在 qtip 论坛上发现了一个似乎与我的问题有关的主题 (http://craigsworks.com/projects/forums/thread-solved-reload-qtip-with-new-items)，我尝试了该主题中的所有内容，而且我使用的是最新版本的 qtip，所以我使用 on() 而不是 live() 因为live() 已弃用。它仍然没有解决它。代码如下：

<script type="text/javascript">
jQuery(document).ready(function() {
    $('img[title]').on('mouseover', function() { 
        if( typeof( $(this).data('qtip') ) == 'object' ){ return; }
        $(this).qtip({
            content: {
                text: false
            },
            style: 'cream',
            position: {
                viewport: $(window)
            }
        });
        $(this).qtip('show');
    });
});
</script>

Answer 1

通过存储 qTip 设置，在加载新内容后，可以很容易地（重新）使用相同的设置初始化 qTip。

如果没有完全了解您的 javascript，我无法具体说明，但应该这样做：

jQuery(document).ready(function() {
    var qtipOptions = {
        content: { text: false },
        style: 'cream',
        position: { viewport: $(window) }
    };

    $('img[title]').qTip(qtipOptions);

    $("#myButton").on('click', function(){
        $.ajax({
            //...
            //...
            //...
            success(function(html){
                $("#mySelector").html(html);
                $('img[title]').qtip('destroy').qtip(qtipOptions);
            })
        });
    });
});