Buttons action inside recursion templates occuring multiple times

help
1 
<template name="childcardstmpl">
    <div class="cards-list child-cards-list">
        {{#each selected_children id}}
            <input type="text" id="{{_id}}" class="card-input childtitle "  autocapitalize="none" autocorrect="off" value="{{cardTitle}}">
          </div>
        {{/each}}
        <input type="button" id="" class="addCardButton createSiblingCard {{id}}" value="Add">
    </div>
    {{#if isSelected_have_children id}}
        {{#with selected_child id}}
            {{> childcardstmpl id=_id}}
        {{/with}}
    {{/if}}
</template>

I have this recusrion template, which is working fine and rendering whatever I want, I’ve attached events to template

'click .createSiblingCard':function(e,tmpl){
        console.log(this);
}

Suppose that recusrion templates renders

a > b > c > d

each time with the button

<input type="button" id="" class="addCardButton createSiblingCard {{id}}" value="Add">
If I click on button in a, the click event is firing 1 time

If I click on button in b, the click event is firing 2 times

If I click on button in c, the click event is firing 3 times

I want the button event to be fired only once no matter what place I’m in(a or b or c)

How to do that? What is the error in my code?

Is there any other way to rewrite my recurion template, so the event only occure once.

2

This sounds like classic event propagation (bubbling) to me.

The way to prevent bubbling (from Meteor v0.8 I think) is to return false from the event handler:

'click .createSiblingCard':function(e,tmpl){
   console.log(this);
  return false;
}
1 Like
3

Not working Still firing multiple times,The issues is I think it is firing click events for the previous element too

4

We ran into this problem internally a long time ago.

Our solution ended up being to use the rendered event on the template to bind our events using the local jquery object it provides.

Even then, I believe we had to be careful to .off unbind our events before using .on to add them back.

5

You’re probably looking for stopImmediatePropagation()

'click .createSiblingCard': function(event, template) {
  event.stopImmediatePropagation();
  console.log(this);
}
1 Like
6

The ansert for this questio is here,
Copying code snippet here

Template.branch.events({
  'click': function (e,b) {    
    console.log("this will show up as often as deep your tree is");
    if (this._id==b.data._id)
      console.log("this will show up only once");
  }
});