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

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


这是造成此ajax调用后$ tooltip2和$ tooltip3丢失的原因,=(。Ive也尝试过此操作:

$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

充满细节的第二大回答之后,为什么不重新创建工具提示?

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

最佳答案

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

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

关于javascript - 销毁工具提示jquerytools,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/22365189/

10-11 22:12
查看更多