Event Handler Target Mismatch

help
1

I have an event handler that is giiving me an event.target that is unexpected.

Template html contains:

Template javascript contains:

Template.blah.events({
‘click .removePlanButton’: function(event) {
event.preventDefault();
console.log("target: " + JSON.stringify(event.target));
console.log("jquery: " + JSON.stringify($(event.target)));
console.log("class: " + JSON.stringify($(event.target).attr(“class”)));
console.log("attr: " + JSON.stringify($(event.target).attr(“data-id”)));
console.log("data: " + JSON.stringify($(event.target).data(“id”)));
…
}
});

Browser console shows:

target: {}
jquery: {“0”:{},“context”:{},“length”:1}
class: "fa fa-remove"
attr: undefined
data: undefined

Can anyone explain why the event.target is not the button that has the class specified in the click event handler and why it is the icon instead?

I want to retrieve the data attribute that is on the element having the class specified in the event handler.

What is the best practice for handling this type of situation?

Apologies if this is obvious in the docs somewhere as I am relatively new to Meteor.
Thanks!
Shawn

2

You’re witnessing the wonderful world of event propagation. You’re clicking on the icon inside of the button, so its click event is the one firing up the chain. To handle this in your click .removePlanButton event, instead of using $(event.target) use $(this). Our good friend jQuery will make sure $(this) refers to your button.

3

Ah, that makes sense. Thanks for the explanation!