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

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

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

mysql plugins jquery ajax qtip
person JYeh    schedule 14.07.2012    source источник
comment
вы делаете обратную передачу для сортировки результатов sql? поэтому снова запускаем document.ready? если нет, вам, вероятно, придется снова назначить this.qtip после сортировки   -  person Scott Selby    schedule 14.07.2012
comment
Я никогда не слышал о постбэке, но я посмотрю на это.   -  person JYeh    schedule 14.07.2012
comment
покажите код, который сортирует результаты   -  person Scott Selby    schedule 14.07.2012
comment
Я пробовал гуглить постбэк mysql и не получил никаких результатов. Я предполагаю, что это не существует для mysql или это не очень легко сделать. Примерно такой код у меня есть для сортировки: w3schools.com/php/php_ajax_database.asp   -  person JYeh    schedule 14.07.2012

Ответы (1)


arrow_upward
0
arrow_downward

Сохранив настройки 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);
            })
        });
    });
});
person Beetroot-Beetroot    schedule 14.07.2012
comment
Я не уверен, как бы я вписал свой код в ваш. Я не использую ajax внутри qtip, а использую это: w3schools.com/ php/php_ajax_database.asp Поэтому, когда я нажимаю на ссылки сортировки, он вызывает другую страницу, которая запрашивает базу данных и создает таблицу, которая заменяет таблицу на странице. Я попытался ввести ‹script type=text/javascript› var qtipOptions = {//options }; $('img[название]').qtip('уничтожить').qtip(qtipOptions); ‹/script› в конце вызываемой страницы не работал. Но, возможно, я не правильно пишу код; Я новичок в jQuery. - person JYeh; 14.07.2012
comment
Справочник w3schools показывает вам, как сделать необработанный AJAX, но с jQuery на странице, поэтому глупо не использовать его возможности AJAX. Изучение jQuery.ajax() (и различных методов быстрого доступа) станет отличным вложением средств для повышения производительности сейчас и в будущем. Прочитайте документацию, а затем вернитесь к предложенному мной коду. Вы увидите, что это не ajax внутри qtip, а qtip внутри ajax — точнее, оператор .qtip(...) появляется в обработчике успеха AJAX. - person Beetroot-Beetroot; 14.07.2012
comment
Я прочитал эту документацию и преобразовал свой код в jQuery AJAX, и он наконец заработал! :) Спасибо. И вы правы, это определенно очень полезно в будущем. - person JYeh; 14.07.2012