销毁工具提示 jquerytools

Question

好的，我有这段代码，我为 3 个不同的项目设置了 $tooltip，其中只有 $tooltip 使用 ajax 刷新。效果很好，但是在 ajax 中刷新后我必须运行

$('.tooltip').remove();

这是这个ajax调用后的问题，$tooltip2和$tooltip3丢失了，=(。我也试过这个：

$tooltip = $('.tooltip').remove();

但我显然错了。

这是我设置 $tooltip 的代码

var $tooltip = null;
    var $tooltip2 = null;
var $tooltip3 = null;
    function ttp() {

    $tooltip = $('.marcleidnot[title]').tooltip({
    delay:100,
    slideInSpeed: 300,
    slideOutSpeed: 300,
    bounce: false,
    /*bounce: false*/
    relative: false, // <-- Adding this should sort you out
    effect: 'slide',
    direction: 'down',
    /*slideInSpeed: 300,
    slideOutSpeed: 200,*/
    position: 'top center',
    offset: [-15, 0]
});

    }

    $( document ).ready(function() {

$tooltip2 = $('.fav[title]').tooltip({  
    delay:50,
    slideInSpeed: 200,
    slideOutSpeed: 200,
    /*bounce: false,*/
    relative: false, // <-- Adding this should sort you out
   effect: 'slide',
    direction: 'down',
    /*slideInSpeed: 300,
    slideOutSpeed: 200,*/
    position: 'top center',
    offset: [10, -2]
});

 $tooltip3 = $('.nofav[title]').tooltip({
    delay:50,
    slideInSpeed: 200,
    slideOutSpeed: 200,
    /*bounce: true,*/
    relative: false, // <-- Adding this should sort you out
    effect: 'slide',
    direction: 'down',
    /*slideInSpeed: 300,
    slideOutSpeed: 200,*/
    position: 'top center',
    offset: [10, -2]
});

});

还有 Ajax 调用

function notifications() {
    $.ajax(
            {
                type: "POST",
                //data: dataparam,
                url: "<?php echo $notifurl;?>",
                success: function(msg)
                    {
                        if(msg !="")
                        {
                            $("#ajaxnotif").empty().html(msg);
                            //$('.tooltip').remove();

        $tooltip = $('.tooltip').remove();

                             ttp();
                            //$("#suggestDiv").show();
                        }
                        else
                        {
                            $("#ajaxnotif").empty().html(msg);

    $tooltip = $('.tooltip').remove();

                            ttp();
                            //$("#suggestDiv").hide();
                        }
                    }
            });
    }

更新

回答后我编辑并执行

function destroyTooltips($targets) { 
    $targets.removeData('tooltip').unbind().next('div.tooltip').remove();
}

var $destroyThis = $('.marcleidnot[title]');



function notifications() {
    $.ajax(
            {
                type: "POST",
                //data: dataparam,
                url: "<?php echo $notifurl;?>",
                success: function(msg)
                    {
                        if(msg !="")
                        {
                            $("#ajaxnotif").empty().html(msg);
                            //$('.tooltip').remove();
        destroyTooltips($destroyThis);  

                             ttp();
                            //$("#suggestDiv").show();
                        }
                        else
                        {
                            $("#ajaxnotif").empty().html(msg);
    destroyTooltips($destroyThis);

                            ttp();
                            //$("#suggestDiv").hide();
                        }
                    }
            });
    }

现在的问题是，当进行 ajax 调用时，工具提示永远保持打开状态..

但现在我不会失去 $tooltip2 和 $tooltip3

我做错了什么。

更新2

在充满细节的 2nd Great Answer 之后，为什么不重新创建工具提示？

function notifications() {
    $.ajax(
            {
                type: "POST",
                //data: dataparam,
                url: "<?php echo $notifurl;?>",
                success: function(msg)
                    {
                        if(msg !="")
                        {
                            $("#ajaxnotif").empty().html(msg);
                            //$('.tooltip').remove();
         destroyTooltip($tooltip);

            // If you update the title of the tooltip, it will be init correctly.
            $tooltip.attr('title', msg);

            initTooltip($tooltip, {
                delay        : 100,
                slideInSpeed : 300,
                slideOutSpeed: 300,
                bounce       : false,
                offset       : [-15, 0]
            });
                            //$("#suggestDiv").show();
                        }
                        else
                        {
                            $("#ajaxnotif").empty().html(msg);
     destroyTooltip($tooltip);

            // If you update the title of the tooltip, it will be init correctly.
            $tooltip.attr('title', msg);

            initTooltip($tooltip, {
                delay        : 100,
                slideInSpeed : 300,
                slideOutSpeed: 300,
                bounce       : false,
                offset       : [-15, 0]
            });
                            //$("#suggestDiv").hide();
                        }
                    }
            });
    }

Answer 1

首先为每个工具提示准备变量。

var $tooltip  = null;
var $tooltip2 = null;
var $tooltip3 = null;

创建一个函数来初始化一个工具提示。

function initTooltip($theTooltip, theOptions) {

    var defaultOptions = {
        delay         : 50,
        slideInSpeed  : 200,
        slideOutSpeed : 200,
        relative      : false,
        effect        : 'slide',
        direction     : 'down',
        position      : 'top center',
        offset        : [-15, 0]
    };

    if (typeof theOptions != 'undefined') {
        theOptions = $.extend({}, defaultOptions, theOptions);
    } else {
        theOptions = defaultOptions;
    }

    $theTooltip.tooltip(theOptions);
}

在文档就绪事件中，首先在 DOM 中查找工具提示，然后分别初始化每一个。

$(document).ready(function() {

    $tooltip  = $('.marcleidnot[title]');
    $tooltip2 = $('.fav[title]');
    $tooltip3 = $('.nofav[title]');

    initTooltip($tooltip, {
        delay        : 100,
        slideInSpeed : 300,
        slideOutSpeed: 300,
        bounce       : false,
        offset       : [-15, 0]
    });

    initTooltip($tooltip2);

    initTooltip($tooltip3);

});

当 AJAX 调用完成时，只需销毁特定的工具提示，然后重新创建它。

function notifications() {
    $.ajax({
        type: "POST",
        url: "<?php echo $notifurl;?>",
        success: function(msg) {

            // Hide and destroy the old tooltip before you replace the HTML.
            $tooltip.hide().remove();

            // Replace the old HTML with the new HTML.
            $("#ajaxnotif").empty().html(msg);

            // Update the variable for the replaced tooltip.
            $tooltip = $('.marcleidnot[title]');

            // Init the tooltip again.
            initTooltip($tooltip, {
                delay        : 100,
                slideInSpeed : 300,
                slideOutSpeed: 300,
                bounce       : false,
                offset       : [-15, 0]
            });
        }
    });
}

Answer 2

在 cmets... 尝试使用带有这些参数的 Mark 函数：

var $destroyThis = $('.marcleidnot[title]');
destroyTooltips($destroyThis);

您的 $tooltip 变量不包含正确的元素。