Appended Button Onclick Don't Fire Jquery

I am having a button which appends 2 textfields and a button in a table td, however the problem is that the onclick function of the appended button don't fire. anyone sees the prob

Solution 1:

You will need to use the jQuery .on() functionality to access elements created after the DOM has loaded.

More specific info can be found in the jQuery manual here: http://api.jquery.com/on/

$( document ).on( "click", "#add", function() {
    alert("aaaaaaaaaaa");
} ); 

In jQuery < 1.7 , this was previously used like so:

$( "#add" ).live( "click", function( e ) {} );

Solution 2:

Probably you have to use .on or .live(), they make the script recognize elements created after $(document).ready() be called.

For example:

before jQuery 1.7

$("#add").live("click", function() {
    ...

jQuery 1.7 and higher

$("#add").on("click", function() {
    ...

Solution 3:

Wrap your code in the jQuery document ready function:

$(function() {
   $("#add").click(function() {
      $(".no_border").append("<br /><label>Co-author email:</label><inputtype='text'name='author_email'/><label>Co-author Level:</label><inputtype='text'name='author_level'/><inputid='save'type='button'name='save'value='Add'/>");
   });
});

For more details see: http://api.jquery.com/ready/

Alternatively you could use .on or .live (.on being the preferred method from 1.7).

   $(document).on('click', '#add', function() {
      $(".no_border").append("<br /><label>Co-author email:</label><inputtype='text'name='author_email'/><label>Co-author Level:</label><inputtype='text'name='author_level'/><inputid='save'type='button'name='save'value='Add'/>");
   });

   $("#add").live('click', function() {
      $(".no_border").append("<br /><label>Co-author email:</label><inputtype='text'name='author_email'/><label>Co-author Level:</label><inputtype='text'name='author_level'/><inputid='save'type='button'name='save'value='Add'/>");
   });