Buttons action inside recursion templates occuring multiple times

<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}}">
        <input type="button" id="" class="addCardButton createSiblingCard {{id}}" value="Add">
    {{#if isSelected_have_children id}}
        {{#with selected_child id}}
            {{> childcardstmpl id=_id}}

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

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.

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){
  return false;
1 Like

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

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.

You’re probably looking for stopImmediatePropagation()

'click .createSiblingCard': function(event, template) {
1 Like

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

  '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");