在ajax之后，bootstrap中的工具提示不起作用

the tooltip in bootstrap doesn't work after ajax

本文关键字：工具提示 不起作用 bootstrap ajax 之后      更新时间：2023-09-26

我有一个名为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时，表下面的工具提示确实起作用了。

谁能帮我修复工具提示?Thx .

在body等元素上使用选择器

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

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

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

在DOM操作之后，将此代码放入AJAX成功处理程序中。

您必须将工具提示初始化放在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"属性(即未初始化的工具提示)的节点初始化工具提示。

我什么都试过了，但都不起作用。因此，当我点击*时，我仔细查看了tooltip，发现每次show .bs.tooltip被触发时，都会出现一个aria- descripbedby属性，并且每次它的值都会改变。

所以，我的方法(它有效)是改变这个动态元素的内容。

我得到了这个代码:

$('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永远被触发，在默认值和新值之间切换。

您可以通过以下两种方式之一来实现:

  1. 您可以编写一个ajaxComplete函数，以便每次ajax调用完成后，它都会一次又一次地重新初始化工具提示。当您的大多数页面中都有数据表，并且希望在每次ajax数据表调用后初始化工具提示时，这非常有用:
$(document).ajaxComplete(function() {
    $("[data-toggle=tooltip]").tooltip();
});
  • 或者你可以在ajax成功回调后调用工具提示函数:
    • 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
    }
})

    run

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

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

    我设置我的工具提示位置如下:

    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>

    然后我调用，"setUpToolTipHelpers()"在我的成功ajax函数。或者你也可以在整个函数中调用它。这对我来说似乎很有效。

    相关文章：