Bootstrap 4 Tooltips aufhören zu arbeiten nach jquery-pjax AJAX Anruf

Question

Ich bin neu in Javascript und könnte Ihre Hilfe verwenden. Das erste Mal, meine PJAX Seite geladen wird, meine Tooltips arbeiten:

$(document).ready(function() { 
$(document).pjax('a', '#main', {cache: false}); 
$('[data-toggle="tooltip"]').tooltip(); 
} 

Sie stecken bleiben, es sei denn ich folgendes tun:

$(document).on('pjax:start', function(event) { 
$('[data-toggle="tooltip"]').tooltip('dispose'); 
}); 

Ich habe versucht, neu zu initialisieren sie auf pjax: Ende oder pjax: alle ohne Glück. Ich bekomme einen merkwürdig aussehenden Tooltip, wenn ich lange schwebe, aber keinen Bootstrap-Tooltip.

Wie installiere ich Tooltips nach Abschluss des XHR?

Bootstrap v4.0.0-beta.2 https://v4-alpha.getbootstrap.com/components/tooltips/

https://github.com/defunkt/jquery-pjax

Answer 1

Ich verwendete einen Skriptblock außerhalb meines PJAX-Containers #main. Wenn ich den Code unten an den untersten Skriptblock verschiebe, der im Container zurückgegeben wird, ist das Leben gut. Der Tooltip bleibt nicht hängen, wenn ich eine Tastaturverknüpfung für eine AJAX-Navigation verwende oder wenn ich auf ein Tooltip-Kontrollkästchen klicke. Der Tooltip ist ein Bootstrap-Tooltip, wenn ich die Seite zum ersten Mal lade und wenn ich AJAX verwende, um auf die Seite zu gelangen. (Ich bin mir nicht sicher, ob ich den Anruf aus habe() aber es sollte nicht weh tun.)

$('[data-toggle="tooltip"]').tooltip(); 
$(document).off('pjax:start'); 
$(document).on('pjax:start', function(event) { 
    $('[data-toggle="tooltip"]').tooltip('dispose'); 
}); 

Answer 2

Ist die folgende Arbeit?

$(document).ready(function() { 
    $(document).on('pjax:success', 'a[data-pjax]', function(event) { 
    $('[data-toggle="tooltip"]').tooltip('dispose'); 
    $('[data-toggle="tooltip"]').tooltip();  
    }); 
    $(document).pjax('a', '#main', {cache: false}); 
});