JS事件鼓舞了DOM

Question

On my meteor app I have comments and within those comments I have a button "reply" when I click on reply the form to leave an additional comment will open.

The problem is that when I click on a reply button it opens the form on all the other comments as well as the one clicked instead of only where I clicked.

this is my code

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

and html

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

Answer 1

Try using stopPropagation and narrowing down the .commentToShow class, maybe adding a data attr to the button you are clicking that will tell you the element to show:

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

There are two things you'll need to do, one of them is to stop the propagation event from bubbling up the event chain and the second one is only reference the current object (referenced with this), because you're targeting all the classes instead of the current object.

template.replyComments.events({
'click #replyToCommentButton2': function(e) {
    e.stopPropagation();
    var targetedForm = $(this).data("show");
    $(".commentToShow", targetedForm).show();

},

This should help to understand event propagation: What's the difference between event.stopPropagation and event.preventDefault?

Answer 3

So this is not really answer to your question, but unless you are using some third party lib that requires you to manipulate the DOM with jQuery there is a more Meteoric approach to this.

// 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>

Note that you will need to meteor add reactive-var to add the reactive var package.

This is what I'm using in my comments package for a blog. You can check out the source code here if you wish.

And if you dont like coffeescript you can translate it .

If you still prefer to use jQuery you should probably use the template optimised version that ships with Meteor. Within an event handler it's available as tmpl.$ and will only select elements within the template (so children will be included too).

Answer 4

This was the answer to the problem I was having (answered by someone on Meteor forums)

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