Il collegamento nel popover Bootstrap non funziona

Question

Ho un popover con trigger di attivazione e un collegamento nel popover.

Html:

<div class="tree"> 
    <div class="html-popup"> 
     Popup text <a href="http://www.google.com" target="_top">Link somewhere</a> 
    </div> 
    <a tabindex="0" role="button" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="bottom"> 
     Text that has a popover 
    </a> 
</div> 

JavaScript:

$('.tree [data-toggle="popover" ]').popover({ 
    html: true, 
    content: function() { 
     return $(this).prev().html(); 
    } 
}); 

Ecco un esempio dal vivo: JSFiddle

In Chrome sul link si apre prima della chiusura del popover, ma in IE e Firefox chiude semplicemente il popover.

Devo supportare IE9 e versioni ragionevolmente nuove di Firefox. Come posso rendere il collegamento aperto prima che il popover si chiuda?

Grazie!

Answer 1

Hai provato questo codice solo in jsfiddle?

Se è così, questo sta accadendo perché questo tipo di ambiente virtuale funziona utilizzando iframe, che la maggior parte dei browser non consente il reindirizzamento per motivi di sicurezza. Rimozione del 'bersaglio' attributo si otterrà il seguente errore console:

Load denied by X-Frame-Options: https://www.google.com.br/ does not permit cross-origin framing.

Se si sta lavorando all'interno di un iframe una buona opzione è il cambiamento di target="_blank" altrimenti dovrebbe funzionare.

Answer 2

Siamo spiacenti, non è possibile aggiungere un commento alla tua risposta matheusrufca, ma questo non aiuta con IE9 e inferiore. Il popover è semplicemente scomparso, indipendentemente dalla sua origine o meno.

Answer 3

Ho giocato un po 'con il tooltip di bootstrap e una soluzione rapida e sporca sarebbe quella di rimuovere la funzionalità di chiusura su sfocatura e chiuderla quando si fa clic su un elemento al di fuori del suggerimento.

Ecco un breve esempio: https://jsfiddle.net/b8hjg5x9/.

$('.tree [data-toggle="popover"]').popover({ 
    html: true, 
    content: function() { 
     return $(".html-popup").html(); 
    } 
}).on('show.bs.popover', function() { 
    $('[data-toggle="popover"]').popover('hide'); 
}); 

$('html').on('click', function (e) { 
    if ($(e.target).data('toggle') !== 'popover') { 
     $('[data-toggle="popover"]').popover('hide'); 
    } 
}); 

Spero che questo aiuti.

Answer 4

Risposta a BebliucGeorge. Questo funziona per un caso semplice, ma per 2 o più tooltip introduce un nuovo bug - il popover non si chiude se clicco su un altro interruttore.

Example: 

https://jsfiddle.net/vc7zn1o6/29/

Answer 5

Rimuovere sottolineatura bersaglio all'interno tag..It dovrà lavorare bene in IE

<div class="tree"> 
    <div class="html-popup"> Popup text <a href="http://www.google.com" target="top">Link somewhere</a> 
    </div> 
<a tabindex="0" role="button" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="bottom"> 
Text that has a popover</a> 
</div> 

Answer 6

Uso _blank invece di _top nell'obiettivo di ancoraggio. Poi il codice dovrebbe essere simile:

<div class="tree"> 
     <div class="html-popup"> 
      Popup text <a href="http://www.google.com" target="_blank">Link somewhere</a> 
     </div> 
     <a tabindex="0" role="button" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="bottom"> 
     Text that has a popover 
     </a> 
    </div> 

Answer 7

Aggiungi un onclick al link:

<a href="#" onclick="window.open('http://www.google.com/');\"> link </a> 

ha lavorato per me.Ma non si innesca con il tasto Invio.

Answer 8

Immagino che questo problema sia dovuto all'uso di data-trigger="focus". Quando fai clic sul link nel popover, viene attivato "focus" e quindi il popover viene chiuso. Al momento, l'evento link di collegamento non può essere eccitato. Ho risolto questo problema ritardando il popover del popover dopo il popover del clic.

Esempio: $('[data-toggle=popover]').popover({ delay: { hide: 200 } });