qTip没有动态内容的方法'qtip'

时间:2013-11-19 07:26:34

标签: javascript php jquery qtip

我的系统中有这个界面。 enter image description here

我为所有Successful- [] Failed- []链接分配了类mailListBtn。当用户点击Successful- [] Failed- []时,它将调用此js代码

$(".mailListBtn").click(function(){

var currentId = $(this).attr('id');
    currentId = currentId.split("_"); //Need to split because ID like MCBTN_13
    var actualId = currentId[1];

if($("#C_"+actualId).is(":visible"))
    $("#C_"+actualId).hide("slow","swing");

$("img#LOADER_"+actualId).show();

var dataString ="action=getMailListByID"+
        "&mailID="+actualId;

            $.ajax({
            type: "POST",
            url: "include/get.php",
            data: dataString,
            cache: false,
            async: true,
            success: function(html)
            {   
                $("#SPAN_"+actualId).empty();
                $("#SPAN_"+actualId).append(html);

                $("#C_"+actualId).show("slow","swing");
                $("img#LOADER_"+actualId).hide();

                if($("#C_"+actualId).is(":visible"))
                    $("#CC_"+actualId).show();
                else
                    $("#CC_"+actualId).hide();

                reQtip();

            }   
        });

    });

reQtip()代码

function reQtip()
{
    $("img[rel*='template/qTipUpdateContact.php?refID=']").each(function()
{
    $(this).qtip({
        content: {
                            text: '<img class="throbber" src="images/loader.gif" alt="Loading..." />',
        ajax: {
            url: $(this).attr('rel'), 
            once: false
             },
        title: {
            text: 'UPDATE CONTACT INFO FOR NEWSSID - ' + $(this).attr('title'),
            button: true
            }
        },position: {
            at: 'middle left', // Position the tooltip above the link
                my: 'right middle',
            viewport: $(window), // Keep the tooltip on-screen at all times
            effect: false // Disable positioning animation
        },
        show: {
            event: 'click mouseenter',
            solo: true // Only show one tooltip at a time
            },
        hide: {
            event: 'click'
              },
        style: {
            classes: 'qtip-dark'
            }
        });
});
}

如果可以看到,在内容加载成功后,我调用reQtip()函数,以便具有qTip的内容激活每个元素的qTip。内容如下所示: -

enter image description here

如您所见,鼠标悬停在绿色按钮上会弹出qTip,如下所示: -

enter image description here

问题是,我第一次点击Successful- [0] Failed- [4]内容显示和qTip功能正常。比我点击成功 - [4]失败 - [9]内容显示但qTip错误。 Google Chrome中检查代码的错误是未捕获TypeError:对象[object object]没有方法&#39; qtip&#39; 。对于您的信息,我已在&lt; head&gt;中包含qTip js文件在我的PHP页面中。为什么qTip只能运行第一个内容,但第二个内容会出错。

我尝试检测qTip功能是否存在。为此,我在reQtip()函数之上添加了这段代码。

if($.fn.qtip)
    alert("Function exist");
else
    alert("Function not exist"); 

结果是它提醒的第一个内容&#34;功能存在&#34;我将鼠标悬停在图标上并显示qTip。比我点击另一个成功 - []失败 - []来检索另一个内容,而不是我得到警报&#34;功能不存在&#34;。我的问题是,qTip在使用后删除了它们的功能吗?

1 个答案:

答案 0 :(得分:1)

this post

中找到我的问题的解决方案

问题出在我的qTip页面上。我有js脚本并在我的qTip页面中包含js文件。删除它或将其放在初始页面内将解决问题。

谢谢。