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();
  }
});

现在，每次点击回复时，都应该打开上面模板放置的特定评论的回复表单。

这是有效的，但仅限于“根”评论，这意味着：如果我点击回复是对“根”评论的回复，console.log("Got in.")将触发3次。如果它是5级深度回复，它将触发5次，等等。

我怀疑这是因为我在模板“comment”中呈现模板“comment”。因此，流星正在聆听许多“事件”......

但我不知道如何以其他方式做到这一点。那么，任何人都知道解决这个问题，或者更好的方法来实现我正在寻找的东西？

Answer 1

您的推理是正确的 - 嵌套模板会在导致问题的元素上多次注册事件。我认为您可以使用event.stopPropagation()来阻止事件冒泡。

Answer 2

可能会有所不同，但您的所有评论都有span#reply-btn。

id属性指定HTML元素的唯一ID（id属性值在HTML文档中必须是唯一的。）

id属性可用于指向样式表中的样式。

JavaScript（也可以通过HTML DOM）也可以使用id属性来更改具有特定ID的HTML元素。

具有相同id的元素的行为没有明确定义，可能会导致这样的问题。

事件在同一模板中多次触发

2 个答案: