Не удалось загрузить всплывающую подсказку Bootstrap через Ajax

я пытаюсь загрузить (через Ajax Call) всплывающую подсказку, заголовок которой находится в тегах HTML. При загрузке первой страницы, когда она загружается функцией include_once, всплывающая подсказка работает нормально, но не когда я запускаю загрузку страницы с помощью Ajax Call. Вот мои файлы:

loadTable.php

    <?php
        $content = "<a data-toggle='tooltip' data-html='true' title='<strong>ok</strong>'
<span class='glyphicon glyphicon-align-left'></span></a>";

        echo $content;
    ?>

моя страница.php

<button type="button" class="btn btn-primary" onclick="loadPage()">Load</button>
<div id="tableData">
    <?php include_once('loadTable.php');?>
</div>

myjavascriptfile.js

function loadPage(){
    $.ajax({
        type: "POST",
        url: "loadTable.php",
        data:{
            cache: false,
            success: function(result){
                $("#tableData").html(result);
            }
        });
    }
}

NB: конечно, я максимально упростил пример, просто для понимания и простоты.


javascript php jquery ajax twitter-bootstrap-tooltip
person codeless    schedule 25.03.2016    source источник
comment
Что значит не загружается? Похоже, вы загружаете тот же HTML, что и раньше.   -  person Mike Cluck    schedule 26.03.2016
comment
Да, то же самое. Но через Ajax всплывающая подсказка не срабатывает при наведении мыши на глификон.   -  person codeless    schedule 26.03.2016
comment
Вам нужно будет повторно инициализировать подсказки для динамически загружаемых элементов.   -  person Wesley Smith    schedule 26.03.2016
comment
Любая идея, как это сделать?   -  person codeless    schedule 26.03.2016
comment
Извините, автокоррекция, см. edit , вам понадобится что-то вроде $('.tooltip').tooltip(); после того, как вы обновите html, я не на 100% в синтаксисе, и я сейчас на своем телефоне, но IIRC, это правильная ода, но вам понадобится настроить селектор по мере необходимости, чтобы настроить таргетинг на элементы всплывающей подсказки   -  person Wesley Smith    schedule 26.03.2016
comment
О, это сработало !!! Спасибо друг :)   -  person codeless    schedule 26.03.2016

Ответы (1)


arrow_upward
6
arrow_downward

Благодаря DelightedD0D решение состоит в повторной инициализации всплывающих подсказок после вызова Ajax.

В моем случае я добавил эту строку: $('[data-toggle="tooltip"]').tooltip();

function loadPage(){
    $.ajax({
        type: "POST",
        url: "loadTable.php",
        data:{
            cache: false,
            success: function(result){
                $("#tableData").html(result);
                $('[data-toggle="tooltip"]').tooltip();
            }
        });
    }
}

Я надеюсь, что это поможет другим, у кого такая же проблема.

person codeless    schedule 25.03.2016