JS Event bubbling up the 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>

Not really familiar with meteor, but your 3rd line will `show()` on anything with that class. You need a more specific selector. — Scheda, Jun 11 '15 at 20:42
Like others have mentioned, when a button with `#replyToCommentButton2` is clicked, you have EVERYTHING with `.commentToShow` show. taxicala's answer is on the right track - `e.target` is the key and will allow you to begin limiting your selection to the thing that you clicked (the `target`). — fuzzybabybunny, Jun 11 '15 at 20:54
Hi, this still won't work, added my html maybe you can see what the problem is?, thanks — AHH, Jun 12 '15 at 01:28

taxicala · Answer 1 · 2015-06-12T12:30:03.780

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

},

)};

edited Jun 12 '15 at 12:30

answered Jun 11 '15 at 20:43

taxicala

21,408
7
37
66

Hi, this still won't work, added my html maybe you can see what the problem is?, thanks – AHH Jun 12 '15 at 01:27
check my edit, i've seen your fiddle and i believe my solution might work now. – taxicala Jun 12 '15 at 12:30

score 0 · Answer 2 · edited May 23 '17 at 11:51

0

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?

edited May 23 '17 at 11:51

Community

1
1

answered Jun 11 '15 at 21:53

Daemedeor

1,013
10
22

Hi, this still won't work, added my html maybe you can see what the problem is?, thanks – AHH Jun 12 '15 at 01:27
so strange, still won't work, why after the $(this).data you provide ("show"), I think it might be something there? thanks foryour help! – AHH Jun 12 '15 at 02:36
@Adam its how jQuery pulls out the data attribute, literally looking for data-show. and i save that as a variable and it pulls the string out looking for an Id and i'm looking for the div commentToShow under that specific form – Daemedeor Jun 12 '15 at 02:39
i need more HTML before I can do a more robust testing – Daemedeor Jun 12 '15 at 02:39
and here is the actual app http://videocomment.meteor.com/project/PTR9tPqbr3eo7GM7T – AHH Jun 12 '15 at 03:42

datacarl · Answer 3 · 2015-06-13T05:07:54.863

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).

score 0 · Answer 4 · answered Jun 14 '15 at 00:52

0

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

answered Jun 14 '15 at 00:52

AHH

301
1
4
13

JS Event bubbling up the DOM

4 Answers4