jquery qtip для динамически добавляемых элементов

Я возился с плагином всплывающей подсказки jquery «qtip» и пытаюсь добавить функциональность qtip к элементам, которые динамически добавляются на мою веб-страницу (через ajax), но не могу понять, как это сделать. Я думаю, мне нужно где-то использовать «live» в моем jquery, но не знаю, где.

Любая помощь будет здорово.

Вот jsfiddle с моей дилеммой. Вы заметите, что qtip отлично работает с тремя существующими ссылками, но если вы нажмете «Добавить ссылку», а затем наведете курсор на созданную ссылку, всплывающая подсказка не появится, даже если она имеет класс CSS «qtip».

Блок javascript содержит функцию для динамического добавления ссылки в блок, плагин qtip, затем мой собственный код, который создает qtip со всеми элементами с классом css «qtip» в конце.

Ниже приведен мой код jquery ajax. Я не знаю, как повторно применить qtips к новым элементам с помощью класса qtip.

function ajaxunitCalendar(X,Y,Z){

    $('#ajaxdiv').fadeOut(300,loadcontent); 

    function loadcontent()
    {
        var changecal = "<?php echo base_url();?>calendar/unit/" + X + "/" + Y + "/" + Z + " #ajax_calendar_wrap";
        $("#ajaxdiv").load(changecal,'',function(){
        $('#ajaxdiv').fadeIn(300); 

            return false; 
        });

        return false;
    }

        return false;   
};

jquery tooltip qtip
person David    schedule 04.01.2012    source источник
comment
Вам придется повторно применять плагин каждый раз, когда вы добавляете другую ссылку.   -  person Andrew Whitaker    schedule 04.01.2012

Ответы (2)


arrow_upward
2
arrow_downward

Упс, совершенно неправильно понял это... слишком поздно ночью :P

Это то, что вам нужно: http://jsfiddle.net/navgarcha/888ap/3/.

Просто примените плагин qtip() ко всем элементам, которые вы создаете.

person nav    schedule 04.01.2012
comment
хм... кажется, что это не так. Ссылки, созданные в окне, по-прежнему не имеют всплывающих подсказок. - person David; 04.01.2012
comment
классно. Как мне добавить функциональность qtip в html, загруженный из jquery ajax? Например, если ссылка «Добавить ссылку» загружает 3 ссылки с классом qtip с другой веб-страницы внутри #box? Есть ли способ добавить qtips в существующие и все будущие экземпляры класса .qtip независимо от того, созданы ли они исключительно из js или загружены в dom с помощью ajax? - person David; 04.01.2012
comment
Вам придется повторно применить плагин к htmlresponse (сначала найдите правильные якорные ссылки) в обратном вызове onSuccess. - person nav; 04.01.2012
comment
Хорошо, спасибо. В любом случае, вы могли бы поставить лайк моему обновленному исходному сообщению и помочь мне сделать это с кодом, который у меня есть? - person David; 04.01.2012
comment
@David Попробуйте $('#ajaxdiv').find('a.qtip').qtip(qtipConfig); внутри своей функции обратного вызова - person nav; 04.01.2012

arrow_upward
1
arrow_downward

Попробуйте добавить QTip после добавления элемента, как показано в этой скрипте: http://jsfiddle.net/888ap/4/

и этот код:

   $(document).ready(function() {
        $("#add_link").live('click', function(e) {


            $('#box').append("<a href='#' class='qtip'>Another Link</a><br/><br/>");
            e.preventDefault();
            bindQtip();
        });
        bindQtip();
    });

function bindQtip() {
    $(".qtip").qtip({
        content: 'Hello!',
        position: {
            corner: {
                target: 'topRight',
                tooltip: 'bottomLeft'
            }
        },
        style: {
            padding: 10,
            textAlign: 'center',
            border: {
                width: 1,
                radius: 3
                //color: '#8ACAED'
            },
            tip: 'bottomLeft',
            name: 'red' // Inherit t
        }
    });
    }
person Kevin Bowersox    schedule 04.01.2012
comment
Не совсем эффективно, поскольку вы будете повторно применять плагин qtip ко всем, которые соответствуют классу, каждый раз, когда вы добавляете новую ссылку, когда у нас есть единственная, которую мы хотим применить к уже определенной и доступной. - person nav; 04.01.2012
comment
Сузьте выбор до только что добавленного элемента. Live не поможет вам в этом, он используется для добавления ФУНКЦИЙ к СОБЫТИЯМ. Вам нужно событие, чтобы вызвать некоторый код, который добавляет QTIP. На мой взгляд, наиболее логичным местом для добавления qtip является нажатие ссылки #add_link. - person Kevin Bowersox; 04.01.2012