Question

我正在搞乱jquery“qtip”工具提示插件，我正在尝试将qtip功能添加到动态添加到我的网页（通过ajax）的元素，但无法弄清楚如何。我想我需要在某个地方的jquery中使用“live”，但不知道在哪里。

任何帮助都会很棒。

在我的两难困境中看到jsfiddle。您会注意到qtip在三个现有链接上运行良好但如果单击“添加链接”然后将鼠标悬停在创建的链接上，即使它具有“qtip”css类，也没有工具提示。

javascript框包含一个动态添加链接的函数，qtip插件，然后我的自定义代码创建qtip，所有元素最后都带有“qtip”css类。

以下是我的jquery ajax代码。我不知道如何使用qtip类将qtips重新应用于新元素。

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
        }
    });
    }

动态添加元素的jquery qtip

2 个答案: