所以我试图让事件点击单选按钮(流星).
我在模板事件(客户端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>
事情是点击事件不会触发,因为div得到了data-toggle =“buttons”
狐狸有这种方法吗?
解决方法
请注意,从Meteor 0.8开始,模板事件将与jQuery触发的事件一起正常工作.
所以正确的解决方案只是绑定到change事件:
- Template.Questions.events({
- 'change #public_btn' : function (){
- console.log('1');
- // something
- },'change #private_btn' : function (){
- console.log('2');
- // something
- }
首先,事件实际上将是输入上的更改事件:无线电(在撰写本文时不点击)
其次,Meteor(0.7.0)使用它自己的事件引擎,它不会捕获jQuery触发的事件,例如. $(元素).trigger( ‘变化’)
如果您看一下bootstrap source,它会显示切换按钮会触发jQuery / synthetic事件.
所以你需要绑定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');
- }