メテオ：ネストされたテンプレートでの複数のイベントの起動

Question

ネストされたテンプレートを使用して各要素の子を表示するテンプレート構造を持っています。それは今まで働いています。

さらにアイコン（click .fa-edit）のイベントがあります。最初のレベルでそのアイコンをクリックするとすべて動作しますが、ネストされた要素をクリックすると複数のイベントが発生しますので、ワンクリックで複数のconsole.logが表示されます。私はそれを理解していないので、それを防ぐ方法がわかりません。

メインテンプレート

<template name="main"> 

    {{#if Template.subscriptionsReady}} 

     <div id="elements"> 
      {{ > getElements parentId=id }} 
     </div> 

    {{else}} 
     <div class="loading">{{ > spinner }}</div> 
    {{/if}} 

</template> 

子供テンプレート

<template name="getElements"> 

    {{#each children}} 
     <div class="row"> 
      <input type="text" name="keyword" value="{{value}}"><i class="fa fa-edit"></i> 
     </div> 

     {{#if subchilden}} 
      {{ > getElements parentId=id }} 
     {{/if}} 
    {{/each}} 

</template> 

イベント

Template.getElements.events({ 
    'click .fa-edit': function(event) { 
     console.log('click'); 
    } 
}); 

Answer 1

問題は股関節ですイベントはテンプレートの外部要素に委譲されます。

あなたがテンプレート（同じテンプレート）を入れ子にしているので、イベントが発生したときには、親テンプレートのすべての外側の要素にバブルアップし、あまりにもそれらによって捕捉されます。

あなたは右、 `するevent.stopPropagationを（）`を意味する。この例ではイベント

Template.getElements.events({ 
    'click .fa-edit': function(event) { 
     event.stopPropagation(); // add this to stop the event from bubbling any further 
     console.log('click'); 
    } 
});