Применить qtip(плагин jQuery) к вновь загруженным элементам на странице

Во-первых, это qtip, плагин jQuery: http://craigsworks.com/projects/qtip2/ По сути, он создает красивые подсказки.

Я использую qtip на странице результатов базы данных mysql, и qtips отлично работают, когда я впервые загружаю страницу. Тем не менее, на моей странице есть ссылки для сортировки, которые приводят к полному изменению информации внутри div (использует AJAX для добавления новой информации в div, выполняя новый запрос mysql, который восстанавливает данные и помещает их в таблицу для замены таблицы на страница). Когда я нажимаю на кнопки сортировки, все работает, кроме исчезновения 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>

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);
            })
        });
    });
});
Другие вопросы по тегам