Warum wird mein Bootstrap-Popover nicht geöffnet?

Ich habe Probleme mit einem Bootstrap-Popover, das nicht geöffnet wird. Es ist nicht das einzige Popover auf der Seite und andere funktionieren gut, also ist es kein Problem mit fehlenden Bibliotheken.Warum wird mein Bootstrap-Popover nicht geöffnet?

Mit Firefox & IE 11.

EDIT Nach der Lösung: Lösung war, wie in der Antwort unten, weil data-content leer war. Während die Dokumentation der aktuellen Version (3) dieses Verhalten in keiner Weise erwähnt, sagt Bootstrap 4 Alpha Doc: Null-Länge title und content Werte werden nie ein Popover zeigen. Dies gilt eindeutig auch für die aktuelle Version.

Finden Sie unten meinen HTML & Javascript-Code.
Kurz gesagt, was ich mache: initialisiere Popover und öffne populate Popover mit Inhalt in einem Div (Divid wird als Datenattribut übergeben).

Beim Debuggen über den Code kann ich sehen, das Popover wird initialisiert und alles, aber beim Klicken auf den Link passiert nichts.

Leider sind keine Fehler aufgetreten. Könnte mir bitte jemand ihre Augen leihen? Ich habe zu lange und starre es an und kann nicht keinen Fehler sehen ...

HTML:

<a data-toggle="popover" data-infotype="scheduledlines" data-divid="${posItemStatus.index}" data-placement="bottom" data-title="" data-trigger="click"> 
     <span class="fa fa-info-circle" aria-hidden="true"></span> 
     <span class="sr-only">Show info</span> 
</a>

Javascript (initialisieren):

$(document).ajaxSuccess(function(){ 

      var init = function(){ 
       $('[data-toggle="popover"]').each(function(index) { 
        $(this).popover({ 
         html: true 
        }); 
        $(this).on('show.bs.popover', onLoadPopoverFunction); 
        $(this).on('remove', function(){ 
         $(this).popover('hide'); 
        }); 
       }); 
      } 

      window.setTimeout(init,100); 
     });

Javascript - Funktion, die aufgerufen wird, auf popover offen:

var onLoadPopoverFunction = function(event){ 
      var element = $(event.target); 
      var infoType = $(element).data('infotype'); 
      [...] 
      if(infoType === "scheduledlines"){ 
       var id = $(element).data('divid'); 
       $(element).data('bs.popover').options.content = $('#ScheduledLines_'+id).html(); 
      } 
     }

Quelle

2017-03-07 Jbartmann

bearbeitet aktiviert wird: sieht aus wie das Problem mit dem data-content Attribute auf dem Anker ist. Es fehlt und ist erforderlich. Hier ist ein funktionierendes Beispiel mit diesem Tweak: https://jsfiddle.net/j87vb46L/3

kann onLoadPopoverFunction an dem Punkt nicht definiert werden, in dem Sie darauf verweisen? d. h., versuche die Quelle neu zu ordnen und definiere das "höher".

Quelle

2017-03-07 13:18:26 gwcodes

Nein, das war nicht das Problem. Danke trotzdem. 'onLoadPopoverFunction' wird aufgerufen, wenn sich das Popover öffnet, aber ich komme nicht einmal an den Punkt, an dem es geöffnet wird. Wenn Sie auf den Link klicken, der das Popover öffnen soll, geschieht nichts und es werden keine Fehler in der Konsole angezeigt. – Jbartmann

Aha - sieht so aus, als ob das Attribut 'data-content' auf dem Anker fehlt und erforderlich ist. Hier ist ein Beispiel, das es in Aktion zeigt: https://jsfiddle.net/j87vb46L/3/ – gwcodes

vielen Dank für Ihre Mühe, es funktioniert! Wenn Sie Ihre Antwort bearbeiten möchten, werde ich sie akzeptieren. – Jbartmann

-1

$(function() { 
$('[data-toggle="popover"]').popover() 
})

Das hatte ich versucht, nachdem einige Änderungen dieses Skript verwenden dies Ihre popover

Quelle

2017-03-07 11:34:07

Warum wird mein Bootstrap-Popover nicht geöffnet?

Antwort

Verwandte Themen