Question

所以我试图点击单选按钮（流星）。

我正在模板事件（客户端js文件）中执行：

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

 'click #private_btn' : function (){
  console.log('2');
  // something
 }

在html客户端文件中我有单选按钮：

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

事情是click事件在div得到data-toggle="buttons"

的同时不会触发

有没有办法让狐狸吃这个？

Answer 1

注意，从Meteor 0.8开始，模板事件将与jQuery触发的事件一起正常工作。

所以正确的解决方案只是绑定到change事件：

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

'change #private_btn' : function (){
   console.log('2');
   // something
}

首先，该事件实际上将是change上的input:radio事件（在撰写本文时不是click）

其次，Meteor（0.7.0）使用它自己的事件引擎，它不会捕获jQuery触发的事件，例如。 $(element).trigger('change')

如果您查看bootstrap source，则表明toggle按钮会触发jQuery /合成事件。

所以你需要绑定jQuery事件处理程序，我发现的最有效的方法是在模板创建时执行它 - 但是基于document.body而不是实际的元素 - 因为它将被替换为每个渲染。

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-3流星事件

1 个答案: