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'); } 
  • Bootstrap popover no funciona
  • ¿Por qué las funciones Bootstrap comienzan con un signo +?
  • Twitter Bootstrap 3 se contrae cuando se marca la checkbox
  • Usando los methods jQuery Bootgrid
  • ¿Cómo incrustar google map usando bootstrap?
  • Crear una tabla de acordeón con Bootstrap
  • Bootstrap 3 tabs y Chart.js: charts que no se cargan en tabs
  • Bootstrap3 dos menus desplegables en la misma línea
  • ocultar / mostrar la fila de la tabla a través de multiselect
  • Javascript no funciona después de activar Updatepanel en asp.net
  • Crear carrusel de arranque con subtítulos en lugar de puntos
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.