Плагин qtip не работает с плагином jquery jtemplates - PullRequest
Новая
       33

Плагин qtip не работает с плагином jquery jtemplates

0 голосов
/ 22 декабря 2011

Я использую 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>

1 Ответ

3 голосов
/ 22 декабря 2011

Вы используете свою логику qtip для $ (document) .ready (). Проблема в том, что, поскольку вы загружаете новую разметку после загрузки страницы, логика 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();
    }
});
...