0

Ajax を使用してデータをロードしています。

jQuery jTemplates の助けを借りて、コンテナ内にデータをロードします。コンテナー内のイメージに jqtip プラグインを適用する必要がありますが、何らかの理由で機能しません。外で問題なく動作する場合。

なぜそれが機能しないのですか？どうすればデバッグできるか教えてください。

これが私のコードです

$.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

You're running your qtip logic on $(document).ready(). The problem is that because you're loading new markup after the page has loaded, the qtip logic doesn't apply to it.

Try wrapping your qtip logic inside a function, then call the function after you run your AJAX call.

Something like this:

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 に答える