Evento Bootstrap-3 Meteor en botones de radio

Así que estoy tratando de hacer que el evento click los botones de radio (meteor).

Lo estoy haciendo en los events de plantilla (file js del cliente):

Template.Questions.events({ 'click #public_btn' : function (){ console.log('1'); // something }, 'click #private_btn' : function (){ console.log('2'); // something } 

y en el file de cliente html tengo los botones de opción:

 <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="radio" name="privacy_options" value="public" id="public_btn"> Public </label> <label class="btn btn-primary"> <input type="radio" name="privacy_options" value="private" id="private_btn"> Private </label> </div> 

El hecho es que el evento de click no se dispara siempre y cuando el div tenga los data-toggle="buttons"

¿Hay alguna manera de zorro esto?

One Solution collect form web for “Evento Bootstrap-3 Meteor en botones de radio”

Tenga en count que a partir de Meteor 0.8, los events de Plantilla funcionarán correctamente con los events activados por jQuery.

Entonces, la solución correcta será solo binding para el evento de change :

 Template.Questions.events({ 'change #public_btn' : function (){ console.log('1'); // something }, 'change #private_btn' : function (){ console.log('2'); // something } 

Primero, el evento será el evento de change en la input:radio (no click en el momento de escribir)

En segundo lugar, Meteor (0.7.0) utiliza su propio motor de events, que no detectará events desencadenados por jQuery, por ejemplo. $(element).trigger('change')

Si echa un vistazo a la fuente de arranque , muestra que los botones de toggle disparan un evento jQuery / sintético.

Por lo tanto, debe vincular los manejadores de events jQuery, la forma más eficiente que he encontrado es hacerlo en la creación de templates, pero en base a document.body lugar del elemento real, ya que se replaceá en cada procesamiento.

 Template.Questions.created = function(){ // must bind to `document.body` as element will be replaced during re-renders // add the namespace `.tplquestions` so all event handlers can be removed easily $(document.body).on('change.tplquestions', '#public_btn', function(e){ // handler }); // add the namespace `.tplquestions` so all event handlers can be removed easily $(document.body).on('change.tplquestions', '#private_btn', function(e){ // handler }); }; Template.Questions.destroyed = function(){ // remove all event handlers in the namespace `.tplquestions` $(document.body).off('.tplquestions'); } 
  • Twitter Bootstrap. ¿Por qué los events modales funcionan en JQuery pero NO en JS puro?
  • "No se puede pasar al estado abstracto '" cuando se intenta resaltar padre en la barra lateral
  • ¿Contiene formulario dentro de un popover bootstrap?
  • Bootstrap 3 Dropdown en iPad no funciona
  • CSS / JavaScript - Agregar el estado: focus cuando un elemento está suspendido
  • El carrusel de Bootstrap hace que el text aparezca letra por letra
  • row-fluid vs row en twitter bootstrap
  • ¿Por qué CKEditor se agrega a los divs donde no debería?
  • ¿Cómo se arreglan algunas columnas y algunas desplazables de una tabla?
  • ¿Se puede cargar Bootstrap de forma asíncrona?
  • No se puede get el map de OpenLayers 3 para mostrar en modal Bootstrap
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.