div内子输入的Meteor事件处理程序答案

【问题标题】：Meteor Event handler on child input inside a divdiv内子输入的Meteor事件处理程序
【发布时间】：2015-08-05 00:01:42
【问题描述】：

我有这个 html 结构。

<div class="test">
 <input type="text" /> <!-- this input is generated autoamitcally so i cant set id or className -->
</div>

现在我想在输入中使用按键事件，我的eventtype selector 应该是什么样子？

已经尝试过

Template.myTemplate.events({
 'keypress .test.input .test input':function(event,template){
   console.log("and work"); //this dosnt get printed on the console.
 }
})

我知道“按键输入”有效，但我在同一个模板上有另一个输入，所以我只想触发这个输入上的按键。

【问题讨论】：

标签： jquery events meteor

【解决方案1】：

试试这个：

Template.myTemplate.events({
  'keypress .test input[type="text"]': function(event,template) {
    console.log("and work", event.target);
  }
});

了解 CSS 选择器：http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

【讨论】：

【解决方案2】：

对于自动生成的输入，请使用 Templates.sometemplate.rendered 中的标准 jquery 事件。例如，每次我在 SO: 的答案框中按下一个键时，此代码都会触发一个事件：

$('.wmd-container').find('textarea').on('keypress', function(){
  console.log('i r texted')
})

在您的情况下，wmd-container 可以是任何父 div

【讨论】：

【解决方案3】：

如果您在 .test div 中有其他输入（除了将自动生成的输入）并且它们都没有 ID 或 CLASS，则无法知道哪个输入调度了事件。您必须在每个输入字段上使用唯一的 id、类或名称参数。

另一方面，如果您在 .test div 中只有一个输入，那么您要查找的事件应该是 'keypress .test input' 以 MeteorPad 为例：MeteorPad

【讨论】：