il tooltip in bootstrap non funziona dopo ajax

Ho un file denominato index.php, che in I include un altro file denominato file1.php (in index.php includo tutti i file necessari per jQuery, js ecc.). In file1.php ho una tabella con pulsanti, ognuno dei quali apre una modale. le informazioni nel modale provengono da una chiamata ajax per file2.php. in file2.php creo un tavolo. Nella tabella ho la cella:il tooltip in bootstrap non funziona dopo ajax

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

e, beh, il suggerimento non funziona. ma, quando copio questo e lo prendo a file1.php, sotto la tabella, il tooltip funziona.

Qualcuno può aiutarmi a risolvere il suggerimento? Thx.

fonte

2015-09-07 Yuvalb

Penso che sia necessario inizializzare il tooltip sui dati appena arrivati, ad es.

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

inserire questo codice al gestore successo AJAX, dopo la manipolazione del DOM.

fonte

2015-09-07 21:25:26 Tom

La risposta ha funzionato ma per chiarire ulteriormente, ho inserito il seguente codice alla fine della mia pagina AJAX da restituire. – user1405736

Ho aggiunto il codice al mio gestore di successo AJAX, dopo la manipolazione del DOM. Ha funzionato, e poi non ha funzionato. Sono confuso sul motivo per cui non sempre funziona. Ho un modulo in cui l'utente può selezionare diversi filtri, inviare il modulo e ottenere risultati ... e ripetere il processo. AJAX esegue una query per i risultati e li visualizza. È nei risultati in cui voglio che un pezzo di dati agisca come un suggerimento o un popover. Può funzionare per 1 o 2 invii di moduli, dopodiché non funziona. Devo ricaricare la pagina principale per farlo funzionare di nuovo. – Roberto

@Roberto, forse perché la tua funzione di successo non è stata chiamata, e la tua ajax sta chiamando il gestore degli errori. Chiamarlo all'interno del gestore completo dovrebbe essere più coerente. – eaglei22

ho creato la mia punta dell'utensile dal posizionamento in questo modo:

function setUpToolTipHelpers() { 
    $(".tip-top").tooltip({ 
     placement: 'top' 
    }); 
    $(".tip-right").tooltip({ 
     placement: 'right' 
    }); 
    $(".tip-bottom").tooltip({ 
     placement: 'bottom' 
    }); 
    $(".tip-left").tooltip({ 
     placement: 'left' 
    }); 
}

inizializzare questo con un documento chiamata pronto:

$(document).ready(function() { 
     setUpToolTipHelpers(); 
    });

In questo modo è possibile determinare la posizione della punta dell'utensile, e Devo solo assegnare il suggerimento usando una classe e un titolo:

<td class = "tip-top", title = "Some description">name</td>

Quindi chiamo "setU" pToolTipHelpers() "all'interno della mia funzione ajax di successo. Oppure puoi chiamarlo anche sulla funzione completa. Questo sembra funzionare bene per me.

fonte

2017-10-19 19:23:11 eaglei22

il tooltip in bootstrap non funziona dopo ajax

risposta

Problemi correlati