Event bubbling up the DOM, no one in StackOverFlow can solve it

help
1

Hi, I posted this on Stack over flow and no one manages to help succesfully and I cant solve this issue in my 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();
    },
    //...
)};

HTML

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

and here is the complete code for my html and js pages
https://jsfiddle.net/js1Lm0q0/

any help?

2

this selector $(".commentToShow") match every element with given class. So it runs .show() on every comments modal

3

yes , this is the seletor of the reply button (a page with many comments can have many reply buttons) so how can I make so when I click on it only the one I clicked shows instead of all the reply buttons with selector $(".commentToShow")

4

I did not played with template scoping, but I would try something like
this.$(".commentToShow").show();

1 Like
5

@shock is (pretty much) spot on! Just one small correction:

Explanation of correction applied to @shock’s code: this is bound to the current data context, not to the current template. That’d be true for onRendered or onCreated handlers, but in events and helpers this is the current data context. That part of Blaze is a bit less consistent than ideal, so it can trip you up. But other than that… spot on!

EDIT: And so, just to be 100% complete and precise: This problem that you have/had, @hodaraadam, was not about event bubbling, but instead about a too general element selector for your show() call, which is solved by using the template-scoped jQuery instance instead of the regular global one!

6

Thanks , this worked! spent several hours trying to fix that and no answer (in stackoverflow) seemed to help!

1 Like