好的,我有这个代码,我为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
我在做错了什么。在第二次大回答充满细节之后,是不是要重新创建工具提示原因?
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();
}
}
});
}
答案 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]
});
}
});
}