Problem with jquery button click

Question

I am facing a problem in the jquery click event.

My web page involves creating a button through javascript and assigning a class to the button ( call it A ). Now I want to detect the click of that button and I have written the following code for it :

 $(".A").click( function () {

    // do something

 });

To my surprise, this click event never gets called.

But when I make the button statically on the webpage ( during design time ), the same code works.

Is there a different approach to bind a button click with jquery in case a button is created dynamically?

Dogbert · Accepted Answer · 2011-04-12 14:29:14Z

3

You need to use $.live

$(".A").live('click', function () {

   // do something

});

answered Apr 12, 2011 at 14:29

Dogbert

224k43 gold badges419 silver badges416 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DavidGouge · Accepted Answer · 2011-04-12 14:30:10Z

0

Have a look at the live() jquery method to automatically wire up events to new elements. Or, as you create the new button, attach the new click event.

var newbutton = $('<input type="button" value="click me"/>');
somediv.append(newbutton);
newbutton.click(yourhandler);

answered Apr 12, 2011 at 14:30

DavidGouge

4,6336 gold badges36 silver badges46 bronze badges

Comments

Lightness Races in Orbit · Accepted Answer · 2011-04-12 14:30:20Z

0

Your event handler fires at page load, before your button exists.

Either reset the event handler after you create the button, or use .live for late-binding:

$(".A").live('click', function () {
   // do something
});

Now the handler will apply to .A even created in the future.

answered Apr 12, 2011 at 14:30

Lightness Races in Orbit

387k77 gold badges670 silver badges1.1k bronze badges

Comments

Felix Dransfeld · Accepted Answer · 2011-04-12 14:29:45Z

-1

you have to use the live-function of jquery! In difference to the click-function, it watches for dom manipulations. as you can imagine its slightly slower than the .click().

$('.clickme').live('click', function() {
  // Live handler called.
});

Felix

answered Apr 12, 2011 at 14:29

Felix Dransfeld

2,7371 gold badge31 silver badges41 bronze badges

3 Comments

Lightness Races in Orbit Over a year ago

You mean, the function that you didn't use in your code example?!?

Shaun Hare Over a year ago

Yes this is the bind method You should have copied this example from the docs $('.clickme').live('click', function() { // Live handler called. });

Lightness Races in Orbit Over a year ago

It's "slightly slower"? Slightly slower at what? They do different jobs. If you compare how fast this method is at doing X and how fast the other method is at doing X, the result is "infinite" because the other method cannot do X.

Collectives™ on Stack Overflow

Problem with jquery button click

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related