javascript - qTip 没有用于动态内容的方法 'qtip'

Question

我的系统中有这个界面。

我为所有 Success-[] Failed-[] 链接分配了 mailListBtn 类。当用户单击成功-[]失败-[]时，它将调用此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。内容如下所示:-

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

问题是，第一次点击成功-[0]失败-[4]内容显示正常，qTip功能正常。然后我点击成功-[4]失败-[9]内容显示但qTip错误。谷歌浏览器中检查代码的错误是 Uncaught TypeError: Object [object Object] has no method 'qtip' 。为了您的信息，我已经在我的 php 页面的 内包含了 qTip js 文件。为什么qTip只能运行第一个内容而第二个内容却出错。

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

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

结果是它警告“功能存在”的第一个内容，而不是我将鼠标悬停在图标上并显示 qTip。然后我单击另一个成功-[]失败-[]来检索另一个内容，然后我收到警报“功能不存在”。我的问题是，我们使用qTip后，它的功能会被删除吗？

Answer 1

在this post中找到了我的问题的解决方案

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

谢谢。