0

我正在使用 Ajax 加载数据。

在 jQuery jTemplates 的帮助下，我在 Container 中加载数据。我需要将 jqtip 插件应用于带有 Container 的图像，但由于某种原因它不起作用。如果它在外面工作正常。

知道为什么它不起作用吗？也许给我一个想法如何调试它？

这是我的代码

$.ajax({
        type: "POST",
        url: "/json/default.aspx/loaditems",
        data: "{'parameter':'" + parameter + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {                
            ApplyTemplate(msg);    
        }
    });

function ApplyTemplate(msg) {

    $('#Container').setTemplateURL('/scripts/template.htm', null, { filter_data: true });
    $('#Container').processTemplate(msg);

}

<div id="Container">
</div>

这是我的 template.htm 页面的内容

{#foreach $T.d as post}
        <div class="image_wrap" style="float: left;">
            <a href="{$T.post.url}">
                <img width="175" src="{$T.post.profimage}" title="test" /></a>
        </div>
        {#/for}

这是qtip代码

<script type="text/javascript">
        $(function () {


            $('.image_wrap img[title]').qtip({
                position: {
                    corner: {
                        target: 'topMiddle',
                        tooltip: 'bottomMiddle'
                    }
                },
                style: {
                    name: 'cream',
                    padding: '7px 13px',
                    color: '#350608',
                    width: {
                        max: 250,
                        min: 0
                    },
                    tip: true
                }
            });
        });
    </script>
4

1 回答 1

3

您正在 $(document).ready() 上运行 qtip 逻辑。问题是因为您在页面加载后加载新标记，所以 qtip 逻辑不适用于它。

尝试将 qtip 逻辑包装在一个函数中，然后在运行 AJAX 调用后调用该函数。

像这样的东西：

function InitQtip() {
     $('.image_wrap img[title]').qtip({
        position: {
            corner: {
                target: 'topMiddle',
                tooltip: 'bottomMiddle'
            }
        },
        style: {
            name: 'cream',
            padding: '7px 13px',
            color: '#350608',
            width: {
                max: 250,
                min: 0
            },
            tip: true
        }
    });
}

// This will take care of items loaded with the page.
$(function () {
    InitQtip();
}

// This will take care of new items.
$.ajax({
    type: "POST",
    url: "/json/default.aspx/loaditems",
    data: "{'parameter':'" + parameter + "'}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) {                
        ApplyTemplate(msg);
        InitQtip();
    }
});
于 2011-12-22T04:33:57.627 回答