CODEWITHSUNDEEP
jquerymeteor
user2755667
user2755667

Reputation:

Whats wrong with this click event?

I'm just fooling around on meteor, trying to figure out what I did wrong here with this code. Does it have something to do with meteor being different or is my jQuery just off? And I think it's obvious what I want to happen here but if you don't understand I'd like this to alert("dont touch that") on the button click.

jQuery:

 $(document).ready(function(){
   $("button").click(function(){
     alert("dont touch that");
   });
 });

HTML:

<head>
  <title>bubblePop</title>
</head>

<body>
  {{> hello}}
</body>

<template name="hello">
  <h1>Hello World!</h1>
  {{greeting}}
  <input type="button" value="Clic" />
</template>

Upvotes: 0

Views: 70

Answers (4)

matb33
matb33

Reputation: 2820

Template.hello.events({
  "click [type='button']": function (evt, template) {
    alert("don't touch that");
  }
});

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

Since you are generating the elements using a template it is dynamic, so use event delegation

$(document).on('click', "input[type="button"]", function () {
    alert("dont touch that");
});

Upvotes: 1

Mark
Mark

Reputation: 3123

You could use $('input'), or $('input[type="button"]'), or give your button an ID and reference that in your jQuery selector aka $('#ButtonID')

Upvotes: 1

Travis J
Travis J

Reputation: 82287

Selectors in jQuery are css-ish. When it is just a string it looks for elements of that type. So passing "button" makes it look for button elements (of which there are none) and as a result no handler is attached.

You probably wanted to target your input element

$(document).ready(function(){
 $("input").click(function(){
  alert("dont touch that");
 });
});

Upvotes: 1

Related Questions