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

Question

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

Любая помощь будет великолепна.

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

Блок 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;   
};

Answer 1

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

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

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

Answer 2

Попробуйте добавить 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
        }
    });
    }