I am designing webpage using jquery and php. My page has side menu, and clicking one of the option it send a request to server to read some information from file and it will create a form out of it, with submit and other button edit(in case anybody wants to change the information in that form) and send this html back to client. I am able to do this successfully. But when I click on the edit button it actually not calling the click handler I registered for the all the buttons.

$('button').click(function(){
  alert("click event");
 });

I included this in the

jQuery(document).ready(function() {

But because all the jquery/js code in ready() and it gets executed at the page load time, its not able to find these buttons in form because its something which i get from server after loading and replacing it to existing 'div' and hence its not able to invoke the event handler. If I define click handler for the parent div of this form, it receives the click event if I click 'edit' button because that 'div' was present when initial page got loaded. I might not be doing it correctly, may be getting the whole form from server is not a good idea, if you have to do some operation on the form at client side. But is it doable? if yes then whats the possible way out?. Thanks!

I am designing webpage using jquery and php. My page has side menu, and clicking one of the option it send a request to server to read some information from file and it will create a form out of it, with submit and other button edit(in case anybody wants to change the information in that form) and send this html back to client. I am able to do this successfully. But when I click on the edit button it actually not calling the click handler I registered for the all the buttons.

$('button').click(function(){
  alert("click event");
 });

I included this in the

jQuery(document).ready(function() {

But because all the jquery/js code in ready() and it gets executed at the page load time, its not able to find these buttons in form because its something which i get from server after loading and replacing it to existing 'div' and hence its not able to invoke the event handler. If I define click handler for the parent div of this form, it receives the click event if I click 'edit' button because that 'div' was present when initial page got loaded. I might not be doing it correctly, may be getting the whole form from server is not a good idea, if you have to do some operation on the form at client side. But is it doable? if yes then whats the possible way out?. Thanks!

• php
• javascript
• jquery
• html

• there is no 'button' element, only input with type button, ie you need $(":button") – scibuff Commented Mar 19, 2012 at 19:35
• 3 @scibuff I would doubt that. – Shef Commented Mar 19, 2012 at 19:37
• 1 @scibuff - of course there is a button element. w3/TR/html401/interact/forms.html#h-17.5 – j08691 Commented Mar 19, 2012 at 19:37
• just to clarify, both buttons (submit and edit) are basically input of type='button'. – Anil Vishnoi Commented Mar 19, 2012 at 19:41
• @AnilVishnoi: If your buttons are in fact input elements then you would need to change your jQuery selector. Currently what you have in the question will only match button elements (and all of them at that). – David Commented Mar 19, 2012 at 19:42

5 Answers 5

Your event isn't firing because you define it prior to the element existing on the page. Using the .on() method should fix this. Something along the lines of:

$('body').on('click','button', function(){
    alert("click event");
});

should work.

If I understand you correctly you adding the buttons dynamic to the form. You should try to use jQuery.on() insteed, see http://api.jquery./on/

And in your example this might work for you

  $("body").on("button","click", function(event){
     alert("Hello world");
  });

Use on (jQuery 1.7 and up). Previously was delegate (1.4.2+), before that live...

$('*your_form*').on('click', 'button', function(){
  alert("click event");
});

You may simply need to use this instead:

$(document).on('click','button',function(){
    alert("click event");
});

(jQuery 1.7 or higher)

you have to call using button id

$('#buttonid').click(function(){
  alert("click event");
 });

or button class

  $('.buttonclassname').click(function(){
      alert("click event");
     });