Question

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

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

我认为错误的是$（document）.ready意味着qtip内容只会加载到第一页加载，因此当我更改表时，所有qtips都会消失。我在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);
            })
        });
    });
});

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

1 个答案: