usando elementos interactivos dentro de un popover bootstrap

Question

Estoy utilizando con éxito un popover bootstrap en un clic de enlace. Tengo algunos elementos de formulario dentro del popover: un campo de texto, una casilla de verificación y un botón. Puedo adjuntar un oyente de botones usando jquery.live(), pero dentro de ese oyente de botones no parece tener acceso a los elementos de formulario correctos. Existen si los rastreo en un registro de la consola, pero sus valores siempre permanecen los valores predeterminados originales, así que si voy $ ('# txtComment'). Val(); la cadena es siempre la misma, independientemente de lo que ponga en el campo.

¿Hay algún ejemplo, tutoriales o código fuente que pueda ver de algo que esté usando algún tipo de interactividad dentro de un popover de arranque?

esta es la forma en que estoy configurar el 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)); 

entonces yo estoy haciendo esto para mostrar con éxito:

this.commentLink.popover('show'); 

y esta es la función de clic de botón:

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

Answer 1

¡Yay! Lo averigué. ¿Por qué? ¿Por qué esto no está documentado? Extraño trabajar en ActionScript.

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

Este código debe ejecutarse mientras que el popover es realmente visible, ya que no existen los elementos cuando no es visible.

-hoh, y el uso de jquery.live() está en desuso, pero puede usar esta variable $ tip para obtener la referencia del botón una vez que se crea el popover.

Answer 2

La sintaxis ha cambiado. La respuesta de Kalin C Ringkvist necesita ser ligeramente modificado:

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

Nota el método tip() en lugar de $tip.

Answer 3

Para un número variable de botones/enlaces que hay algún evento encuadernados, así es como lo hice (salirse de lo que ha sido respondidas anteriormente):

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

que utiliza otro truco para poder conectar las funciones de la elementos en el popover. Acabo de agregar otro oyente de clic en el elemento que muestra el popover. En el oyente clic se inicia una función con un tiempo de espera (por ejemplo, 500 milisegundos). Después de que se haya iniciado la función, debe poder acceder a sus elementos de popover. Aquí está el código:

 <!-------- 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); 
     });