Click event handler for dynamically-generated input/button?

Question

Can I use exactly the same code to handle clicks for static and for Ajax-generated buttons? The reason I ask is that I can't get a click handler to work for an Ajax button, but if I write the equivalent static HTML, the click does work.

This code is the static version, which does work:

// in JS file:
$(function(){
   $('input.sButton').click(function(){
      var f = $.farbtastic('#picker');
      f.linkTo(this);
      return false;
   });
});

In the "static HTML":

<div id = "inputArea">
<label style="white-space: nowrap; line-height: 14px; height: 14px; vertical-align: bottom;">
<input id="sButton1" class="sButton" type="button" style="background-color: rgb(113, 16, 232);">
fubar1
</label>
</div>

The normal "dynamic HTML" looks like this:

<div id = "inputArea">
</div>

The Ajax code loads the buttons into 'inputArea'. I derived the static version of this code from Firebug. I ran the Ajax routine, then got the HTML view in Firebug, which included the server output, and cut-and-pasted it exactly into my static test code, which is reproduced above. In other words, I know that the static and dynamic HTML are equivalent.

But - the static code works, and the dynamic one doesn't. Firebug shows the JS click handler being entered for the static version, and the farbtastic colour picker pops up, but this doesn't happen in the dynamic code. Any ideas?

Are you sure you're adding the button to the document before assigning the click action? — Emil Lundberg
– Emil Lundberg, Commented Dec 17, 2011 at 0:37
If you are using Jquery 1.7+ then use the .on method. If anything below 1.7 then use .live(). — flynfish
– flynfish, Commented Dec 17, 2011 at 0:39

Shyju · Accepted Answer · 2011-12-19 15:11:38Z

5

If you are using jquery 1.7+, use on instead of click

http://api.jquery.com/on/

$("body").on("click","input.sButton",function(){
 //do whatever you want
});

if you use a lower version of jquery, use live

$('input.sButton').live("click",function(){
 //do whatever you want
});

edited Dec 19, 2011 at 15:11

answered Dec 17, 2011 at 0:35

Shyju

220k106 gold badges420 silver badges499 bronze badges

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

2 Comments

jermel Over a year ago

Using .on(): Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(); To bind to future elements he should use on with a delegate $('#inputArea').on('click', 'input.sButton', function() {/* whatever*/});

EML Over a year ago

Sorry, unticked the answer. $("#inputArea").on("click","input.sButton",function(){} doesn't work, although I can't see why. $('input.sButton').live("click", function(){} works, and $(document).on("click", "input.sButton", function(){} also works.

Kai Qing · Accepted Answer · 2011-12-17 00:36:25Z

2

$('input.sButton').live('click', function(){
      var f = $.farbtastic('#picker');
      f.linkTo(this);
      return false;
   });

.live listens even for ajax content. Thsi should do the trick. Also, you may want to look into jquery .on() as well. Make sure you're using the latest jquery.

answered Dec 17, 2011 at 0:36

Kai Qing

18.9k6 gold badges41 silver badges61 bronze badges

Comments

haynar · Accepted Answer · 2011-12-17 00:35:10Z

1

there is a jQuery live function just for that purpose, check out it here

answered Dec 17, 2011 at 0:35

haynar

6,0517 gold badges37 silver badges53 bronze badges

Collectives™ on Stack Overflow

Click event handler for dynamically-generated input/button?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related