In Meteor, how do I attach a Template Event to a dynamically inserted element?

Question

I have a Meteor template event where I'm inserting a <div class="mask"></div> on click...

Template.dGlobalNav.events({

    "click .toggle-slide-left": function() {
      var mask = document.createElement("div");
      mask.className = "mask";

      $("body").addClass("sml-open");
      document.body.appendChild(mask);
      Session.set("activeNav", "sml-open");
    },

...I'd then like to attach another click event to this <div class="mask"></div> ...

"click .mask": function() {
  $("body").removeClass(Session.get("activeNav"));
  Session.set("activeNav", "");
  $(".mask").remove();
}

Which all together leaves me with this block:

Template.dGlobalNav.events({

"click .toggle-slide-left": function() {
  var mask = document.createElement("div");
  mask.className = "mask";

  $("body").addClass("sml-open");
  document.body.appendChild(mask);
  Session.set("activeNav", "sml-open");
},

"click .mask": function() {
  $("body").removeClass(Session.get("activeNav"));
  Session.set("activeNav", "");
  $(".mask").remove();
}

});

However, it seems like the "click .mask" function isn't firing at all. I suspect this has to do with the fact that the first click event handler generated the .mask element in the first place...but after lots of desperate Googling I can't find how (or even if) it's possible for me to attach an Template event handler to a dynamically inserted HTML element.

I'm sure I'm doing something (or many things) wrong here, so any help or points in the right direction would be greatly appreciated. :) Thanks!

Answer 1

By the looks of your code the added mask div is not added into the template dGlobalNav that has the "click .mask" event function on it. It is added to the body tag. Therefore it will not fire. I am not sure where you want it, but if you add it to a div thats inside the template it will fire.

I've added this div in the template dGlobalNav HTML.

<div id="test"></div>

Then I used jQuery to add the mask div into this div.

//document.body.appendChild(mask);
$(mask).appendTo("#test");

If you have not removed it you will have jQuery available.