Событие стрельбы несколько раз внутри одного шаблона

Question

У меня есть этот «комментарий» шаблон:

<template name="comment"> 
    <li class="comment" id="{{_id}}" > 

    <div class="comment-wrapper level-{{level}}-comment"> 
     <span id="reply-btn" class="reply-btn reply-btn-{{_id}}"><a href="#">reply</a></span> 
     <div class="content"> 
     <p>{{body}}</p> 
     </div> 
    </div> 

    <div class="reply-to-comment reply-to-comment-{{_id}}" style="display:none;"> 
     <form name="reply" class="reply-form"> 
      <label for="reply_body">Reply to this comment</label> 
      <textarea name="reply_body"></textarea> 
      <button type="submit" class="btn">Post reply</button> 
     </form> 
    </div> 

    {{#if showChildComments}} 
     <ul class="comment-children comment-list"> 
     {{#each childComments}} 
      {{> comment this}} 
     {{/each}} 
     </ul> 
    {{/if}} 

    </li> 
</template> 

С этим comment.js файл связан (только показывающий события часть здесь):

Template.comment.events({ 
    "click #reply-btn": function(e, template){ 
    console.log("Got in.") 
    $(".reply-to-comment-"+template.data._id).toggle(); 
    } 
}); 

сейчас , каждый раз, когда я нажимаю «Ответить», он должен открыть форму ответа для этого конкретного комментария, как показано выше.

Это работает, но только на «корневых» комментариях, что означает: если я нажму ответ на ответ, который является ответом на комментарий «root», то console.log("Got in.") будет трижды запускаться. Если это ответ на 5 уровней, он будет срабатывать 5 раз и т. Д.

Подозреваю, причина в том, что я даю шаблон «комментарий» внутри шаблона «комментарий». Таким образом, существует множество «событий», для которых слушает метеорит ...

Но я не вижу, как я мог бы это сделать любым другим способом. Итак, кто-нибудь знает, исправить эту проблему, или лучший способ добиться того, что я ищу?

Answer 1

Ваши аргументы верны - вложенный шаблон регистрирует событие несколько раз по тем элементам, которые вызывают проблему. Я думаю, вы можете использовать event.stopPropagation(), чтобы остановить событие от пузырей.

Answer 2

Это может быть что-то другое, но все ваши комментарии имеют span#reply-btn.

Атрибут id указывает уникальный идентификатор для элемента HTML (значение атрибута id должно быть уникальным в документе HTML).

Атрибут id может использоваться для указания стиля в таблице стилей.

Атрибут id также может использоваться JavaScript (через HTML DOM) для внесения изменений в элемент HTML с конкретным идентификатором.

Поведение элементов с одинаковым идентификатором не является корректным и может привести к таким проблемам.