ajax 후 부트스트랩의 툴팁이 작동하지 않습니다.

ajax 후 부트스트랩의 툴팁이 작동하지 않습니다.

저는 index.php라는 이름의 파일을 가지고 있는데, index.php라는 이름의 다른 파일을 포함하고 있습니다(index.php I는 jQuery, js 등에 필요한 모든 파일을 포함합니다).file1.php에서 나는 각각 모달을 여는 버튼이 있는 테이블을 가지고 있습니다.modal의 정보는 file2의 file2.jax 호출에서 나온 것입니다.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>

툴팁이 작동하지 않습니다. 하지만 이걸 복사해서 테이블 아래에 있는 파일 1.php로 가져오면 툴팁이 작동합니다.

툴팁 고치는 거 도와줄 사람? 고마워요.

본체와 같은 기존 요소에 셀렉터 사용

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

새로 도착한 데이터에 대한 툴팁을 초기화해야 할 것 같습니다. 예를 들어.

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

DOM 조작 후 이 코드를 AJAX 성공 처리기에 입력합니다.

툴팁 초기화를 Ajax callback 함수에 넣어야 합니다.

$.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-tip="tooltip" 특성이 정의되어 있지만 "data-original-tip" 특성이 없는 모든 노드에 대해 tooltip을 초기화합니다(즉, tooltip이 초기화되지 않음).

저는 모든 것을 시도해 보았지만 아무것도 효과가 없었습니다.그래서 클릭*할 때 툴팁을 자세히 살펴보니 shown.bs .tooltip이 속성별로 설명된 아리아가 표시되고 그 값이 매번 변경됩니다.

그래서 제 접근법은 이 동적 요소의 내용을 바꾸는 것입니다.

코드가 있어요

$('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 속성이 있습니다.원래 제목은 '-'이고, 요소를 클릭할 때마다 ax를 호출하는 것은 원하지 않습니다. 단 한 번만.

데이터가 그렇게 빨리 바뀔 것이라고 기대하지 않기 때문에 매번 아약스를 만드는 것은 유용하지 않습니다.

동적으로 생성된 요소에 .tooltip-inner 클래스가 있는 요소가 있으므로 내용을 바꾸기만 하면 됩니다.

도움이 되길 바랍니다.

*click: 클릭 이벤트를 선택한 이유는 기본 호버로 인해 시스템이 이상해지고 show.bs .tooltip이 영구적으로 실행되어 기본값과 새 값으로 전환되기 때문입니다.

다음 두 가지 방법 중 하나로 수행할 수 있습니다.

1. 당신은 글을 쓸 수 있습니다.ajaxComplete기능: ax 호출이 완료될 때마다 반복적으로 툴팁을 재초기화합니다.대부분의 페이지에 데이터 테이블이 있고 ajax 데이터 테이블 호출 후에 툴팁을 초기화할 때 유용합니다.

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

2. 또는 ajax success callback 후 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
    }
})

달려.

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

#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>

그런 다음 "SetUpToolTip"을 호출합니다.helpers()" 내 성공 아약스 기능 안에 있습니다.아니면 전체 기능에서도 호출할 수 있습니다.이것은 저에게 잘 맞는 것 같습니다.

언급URL : https://stackoverflow.com/questions/32443215/the-tooltip-in-bootstrap-doesnt-work-after-ajax