ajax 后引导程序中的工具提示不起作用

Posted 2023-02-22

【中文标题】ajax 后引导程序中的工具提示不起作用

【英文标题】：the tooltip in bootstrap doesn't work after ajax

【发布时间】：2015-12-03 06:40:04

【问题描述】：

我有一个名为 index.php 的文件，其中包含另一个名为 file1.php 的文件（在 index.php 中，我包含了 jQuery、js 等所需的所有文件）。 在 file1.php 中，我有一个带有按钮的表格，每个按钮都打开一个模式。模式中的信息来自对 file2.php 的 ajax 调用。在 file2.php 我创建一个表。在表格中我有单元格：

<button class='btn btn-default tooltip-default' data-toggle='tooltip' data-trigger='hover' data-placement='top' data-content='content' data-original-title='Twitter Bootstrap Popover'>AAA</button>

而且，工具提示不起作用。 但是，当我将它复制到 file1.php 时，如下表所示，工具提示确实有效。

谁能帮我修复工具提示？ 谢谢。

【参考方案1】：

我认为您需要在新到达的数据上初始化工具提示，例如

$('[data-toggle="tooltip"]').tooltip();

在 DOM 操作之后将此代码放置到您的 AJAX 成功处理程序中。

【讨论】：

答案有效，但为了进一步澄清，我将以下代码放在返回的 AJAX 页面的末尾。

在 DOM 操作之后，我将代码添加到了我的 AJAX 成功处理程序中。它起作用了，然后它没有。我很困惑为什么它并不总是有效。我有一个表单，用户可以在其中选择多个过滤器、提交表单并获取结果......并重复过程。 AJAX 运行结果查询并显示它们。在结果中，我希望一条数据充当工具提示或弹出框。它可能适用于 1 或 2 个表单提交，然后它就不起作用了。我必须重新加载主页才能使其再次工作。

@Roberto，这可能是因为您的成功函数没有被调用，而您的 ajax 正在调用错误处理程序。在完整的处理程序中调用它应该更加一致。

为我工作。 tks.

我在 jquery 数据表上有工具提示，当在成功处理程序中重新初始化表之后放置时，这对我有用。谢谢。

【参考方案2】：

我通过这样的位置设置我的工具提示：

function setUpToolTipHelpers() 
    $(".tip-top").tooltip(
        placement: 'top'
    );
    $(".tip-right").tooltip(
        placement: 'right'
    );
    $(".tip-bottom").tooltip(
        placement: 'bottom'
    );
    $(".tip-left").tooltip(
        placement: 'left'
    );

使用文档就绪调用对其进行初始化：

    $(document).ready(function () 
        setUpToolTipHelpers();
    );

这样我可以确定工具提示的位置，我只需要使用类和标题来分配提示：

<td class = "tip-top", title = "Some description">name</td>

然后我在我的成功 ajax 函数中调用“setUpToolTipHelpers()”。或者你也可以在完整的函数上调用它。这似乎对我很有效。

【参考方案3】：

您必须将工具提示初始化放在 Ajax 回调函数中：

$.ajax(
    method: "POST",
    url: "some.php"
).done(function( msg ) 
    $('[data-toggle="tooltip"]').tooltip();
);

-或-

而不是将初始化代码放在每个 Ajax 回调函数中 您可以使用 ajaxComplete 事件全局实现它：

/* initializate the tooltips after ajax requests, if not already done */    
$( document ).ajaxComplete(function( event, request, settings ) 
    $('[data-toggle="tooltip"]').not( '[data-original-title]' ).tooltip();
);

此代码将为每个定义了 data-toggle="tooltip" 属性但没有属性 "data-original-title" 的节点初始化工具提示（即工具提示未初始化）。

【参考方案4】：

您可以通过以下两种方式之一执行此操作：

您可以编写一个ajaxComplete 函数，这样每次ajax 调用完成后它都会一遍又一遍地重新初始化工具提示。这在您的大多数页面中都有数据表并希望在每次 ajax 数据表调用后初始化工具提示时很有用：

$(document).ajaxComplete(function() 
    $("[data-toggle=tooltip]").tooltip();
);

也可以在ajax成功回调后调用tooltip函数：

function tool_tip() 
    $('[data-toggle="tooltip"]').tooltip()


tool_tip();  // Call in document ready for elements already present

$.ajax(
    success : function(data) 
        tool_tip();  // Call function again for AJAX loaded content
    
)

【参考方案5】：

我已经尝试了所有方法，但没有任何效果。 因此，我仔细查看了 click* 时的 tooltip，发现每次触发 shown.bs.tooltip 时都会出现一个 aria- describeby 属性，并且其值每次都会发生变化。

因此，我的方法（并且有效）是更改此动态元素的内容。

我得到了这个代码：

$('body').on('shown.bs.tooltip', function(e) 

    var $element = $(e.target);
    var url = $element.data('url');

    if (undefined === url || url.length === 0) 
        return true;
    

    var $describedByContent = $('#' + $element.attr('aria-describedby')).find('.tooltip-inner');

    if ($element.attr('title').length > 1) 
        $describedByContent.html($element.attr('title'));
        return true;
    

    $.ajax(
        url: url,
        method: 'GET',
        beforeSend: function () 
            $element.attr('title', 'Cargando... espere por favor.');
            $describedByContent.html($element.attr('title'));
        
    ).done(function (data) 
        $element.attr('title', JSON.stringify(data));
        $describedByContent.html($element.attr('title'));
    );

    return true;
);

在我的例子中，我的工具提示有一个 data-url 属性来获取标题的数据。 原来的标题是'-'，我不想每次点击*元素时都调用ajax，只是第一次。

对我来说，每次都做一个 ajax 没用，因为我不希望数据变化那么快。

动态创建的元素有一个类为 .tooltip-inner 的元素，所以我们只需要替换它的内容即可。

希望这可能会有所帮助。

*click：我选择了 click 事件，因为默认悬停有时会使系统变得疯狂，并且 show.bs.tooltip 被永远触发，在默认值和新值之间切换。 p>

【参考方案6】：

在像body这样的现有元素上使用选择器

$('body').tooltip(selector: '[data-toggle="tooltip"]');

【讨论】：

这工作得天衣无缝，在多次 ajax 调用后替换使用：$('[data-toggle="tooltip"]').tooltip()。

像魅力一样工作！

谢谢。出于某种原因，这行得通，汤姆的方法没有=/

【参考方案7】：

效果很好。

$('body').tooltip(selector: '[data-toggle="tooltip"]');

【参考方案8】：

运行

$('#ding_me_tooltip').tooltip('dispose');
$('#ding_me_tooltip').tooltip();

在 #ding_me_tooltip 是您的选择器的 ajax 之后