销毁工具提示jquerytools

时间:2014-03-12 22:24:11

标签: javascript jquery tooltip jquery-tools

好的,我有这个代码,我为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

我在做错了什么。

UPDATE2

在第二次大回答充满细节之后,是不是要重新创建工具提示原因?

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

2 个答案:

答案 0 :(得分:1)

评论后...尝试使用这些参数的Mark功能:

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

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

答案 1 :(得分: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]
            });
        }
    });
}