In a clean meteor application with the added jquery package, I'm attempting to use the basic jquery css selector. What Am I doing wrong? The non-working example can be found here: http://jquery-test.meteor.com/
The JavaScript is placed directly below the generated template.hello.events method.
JS:
$("#foo").click( function() {
console.log("clicked!");
});
HTML:
<button id="foo" style="border: 10px">This is a test div</button>
You have to place the jQuery code inside the Template.hello.rendered function.
This could be another approach to your problem:
HTML:
<button id="foo" class="foo" style="border: 10px">This is a test div</button>
JS:
Template.hello.events({
'click .foo': function(event){
console.log('clicked');
console.log(event.currentTarget);
}
});
As you mentioned and i saw the link, Your elems are dynamically generated and you are trying to put event on those which are not available in the dom. So you have to delegate the event to the existing closest parent or document which is the existing parent of all other elems.
You can bind the event like this:
$(document).on('click', '#foo', function() {
console.log("clicked!");
});
and make sure to load jQuery first.