utilizzando elementi interattivi all'interno di un popover bootstrap

Question

Sto utilizzando con successo un popover di bootstrap su un clic di collegamento. Ho alcuni elementi di forma all'interno del popover: un campo di testo, una casella di controllo e un pulsante. Sono in grado di collegare un listener di pulsanti utilizzando jquery.live(), ma all'interno di quel listener di pulsanti non sembra che abbia accesso agli elementi del modulo corretti. Esistono se li rintraccio in un log di console, ma i loro valori rimangono sempre i valori di default originali, quindi se vado $ ('# txtComment'). Val(); la stringa è sempre la stessa, indipendentemente da ciò che metto in campo.

Esistono esempi, tutorial o codice sorgente che potrei esaminare su qualcosa che utilizza qualsiasi tipo di interattività all'interno di un popover di bootstrap?

questo è il modo Sto installando il popover:

this.commentLink.popover({ 
    trigger: 'manual', 
    placement: 'right', 
    html : true, 
    content: function() { 
    return $('#commentPopout').html(); 
    } 
}).popover('hide'); 

//jquery.on won't work here so we use live 
$('#btnSubmitComment').live('click', this.proxy(this.commentSubmitClick)); 

allora sto facendo questo per mostrare con successo:

this.commentLink.popover('show'); 

e questa è la funzione del pulsante clic:

commentSubmitClick: function(e){ 
    console.log($('#txtComment').val());//always shows default text regardless of what I've actually typed in the field 
} 

Answer 1

Yay! capito. Perché, oh, perché questo non è documentato? Mi manca lavorare in ActionScript.

var popover = this.commentLink.data('popover').$tip; 
var comment = popover.find('#txtComment').val();//gives correct string 

Questo codice deve essere eseguito mentre il popover è in realtà visibile, dal momento che non esistono gli elementi quando non è visibile.

-Oh e usare jquery.live() è deprecato, ma è possibile utilizzare questa variabile $ tip per ottenere il riferimento al pulsante una volta creato il popover.

Answer 2

La sintassi è cambiata. La risposta di Kalin C Ringkvist deve essere leggermente modificato:

var popover = this.commentLink.data('popover').tip(); 

Nota il metodo tip() invece di $tip.

Answer 3

Per un numero variabile di pulsanti/link che hanno eventi binded, ecco come ho fatto (andando fuori ciò che è stato risposto in precedenza):

var list = $('<ul/>'); 
myCollections.items.each(function(item){ 
    var row = $('<li/>'); 
    row.append(item.get('id'))); 
    row.append($('<a/>').addClass('delete').html('remove')); 
    list.append(row); 
}); 

$(this.el).find('a').popover({ content: list }).on('click', function(){ 
    var popover = $(this).data('popover').tip(); 
    $(popover).find('.delete').on('click', removeitem); 
}); 

function removeitem(){ // code to remove the item here } 

// The HTML (in the popover) would look like this: 
<ul> 
    <li>1<a class="delete">remove</a></li> 
    <li>2<a class="delete">remove</a></li> 
    <li>3<a class="delete">remove</a></li> 
</ul> 

Answer 4

ho usato un altro trucco per essere in grado di collegare le funzioni al elementi nel popover. Ho appena aggiunto un altro listener di clic sull'elemento che mostra il popover. Nel listener dei clic viene avviata una funzione con un timeout (ad esempio 500 millisecondi). Dopo l'avvio della funzione, dovresti essere in grado di accedere ai tuoi elementi popover. Ecco il codice:

 <!-------- HTML -----------> 
     <a class="btn" id="popover_btn">show popover</a> 

     /******* JAVASCRIPT *******/ 
     $('#popover_btn').popover({ 
      html: true, 
      placement: 'top', 
      trigger: 'click', 
      title: 'add new value', 
      content: '<input id="ttt" type="text"/>' 
     }); 

     $('#popover_btn').click(function() { 
      setTimeout(function() { 
       // here you can write your "ON SHOW" code 
       console.debug($('#ttt').length);  // Outputs 1 - the element is there 
      }, 500); 
     });