Question

在我的流星应用上，我有评论，在这些评论中我有一个按钮＆＃34;回复＆＃34;当我点击回复时，表格会打开另外的评论。

问题在于，当我点击回复按钮时，它会打开所有其他评论以及单击评论的表单，而不是仅在我点击的位置。

这是我的代码

template.replyComments.events({
    'click #replyToCommentButton2': function(e) {
         $(".commentToShow").show();
    },
    //...
)};

和html

  <button class="btn waves-effect waves-light"  data-show="#form2"  id="replyToCommentButton2">Reply
    <i class="mdi-content-send right"></i>
  </button>

Answer 1

尝试使用stopPropagation并缩小.commentToShow类，可能会将数据attr添加到您单击的按钮，该按钮将告诉您要显示的元素：

HTML：

<a id="replyToCommentButton2" data-show="#form2">Reply</a>

JS：

template.replyComments.events({
'click #replyToCommentButton2': function(e) {
         e.stopPropagation();
         $(this).parent().find('.commentToShow').show();

},

)};

Answer 2

您需要做两件事，其中一件事是阻止传播事件冒泡事件链，第二件事只引用当前对象（以此引用），因为您的目标是所有类而不是当前对象。

<plugin>
  <groupId>org.sonatype.plugins</groupId>
  <artifactId>nexus-staging-maven-plugin</artifactId>
  <version>1.6.5</version>
  <extensions>true</extensions>
  <executions>
    <execution>
      <id>injected-nexus-deploy</id>
      <phase>deploy</phase>
      <goals>
        <goal>deploy</goal>
      </goals>
      <configuration combine.self="override">
        <executions>
          <execution>
            <id>injected-nexus-deploy</id>
            <phase>none</phase>
          </execution>
        </executions>
      </configuration>
    </execution>
  </executions>
  <configuration combine.self="override">
    <executions>
      <execution>
        <id>injected-nexus-deploy</id>
        <phase>none</phase>
      </execution>
    </executions>
  </configuration>
</plugin>

这有助于理解事件传播：What's the difference between event.stopPropagation and event.preventDefault?

Answer 3

所以这不是你的问题的真正答案，但除非你使用一些需要你用jQuery操作DOM的第三方库，否则有更多的Meteoric方法。

// comment.coffee
Template.comment.created = ->
  # Keep the state of the comment in a ReactiveVar on the template instance
  this.showReplyField = new ReactiveVar

Template.comment.events
  "click [data-reply]": (e, tmpl) ->
    e.stopPropagation()
    # If the reply field is open then close it and vice verse
    currentState = tmpl.showReplyField.get()
    tmpl.showReplyField.set !currentState

Template.comment.helpers
  reply: ->
    # Get the state and expose it to the template. It will update reactively when the value changes and only for this template/comment.
    Template.instance().showReplyField.get()

// comment.html
<template name="comment">
    <p>{{text}} </p>
    {{#if reply}}
      {{> newComment}}
    {{else}}
      <button class="button" data-reply>reply</button>
    {{/if}}
</template>

<template name="newComment">
  <!-- Your new comment html here -->
</template>

请注意，您需要meteor add reactive-var添加反应式var包。

这是我在博客评论包中使用的内容。如果您愿意，可以查看source code here。

如果你不喜欢coffeescript，你可以translate it。

如果你仍然喜欢使用jQuery，你应该使用Meteor附带的模板优化版本。在事件处理程序中，它可以tmpl.$使用，并且只会选择模板中的元素（因此也会包含子项）。

Answer 4

这就是我遇到的问题的答案（由Meteor论坛上的人回答）

template.replyComments.events({
    'click #replyToCommentButton2': function(e, template) {
         template.$(".commentToShow").show();
    },
    //...
)};

JS事件冒泡DOM

4 个答案: