Question

我正在使用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>

Answer 1

您正在$（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();
    }
});

qtip插件不适用于jquery jtemplates插件

1 个答案: