CODEWITHSUNDEEP
jquerynode.jsmeteor
Sam
Sam

Reputation: 841

MeteorJS basic jquery usage

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>

Upvotes: 1

Views: 607

Answers (3)

lfergon
lfergon

Reputation: 973

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);  
  }
});

Upvotes: 1

Jai
Jai

Reputation: 74738

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.

Upvotes: 0

TimDog
TimDog

Reputation: 8918

You have to place the jQuery code inside the Template.hello.rendered function.

Upvotes: 2

Related Questions