附加按钮onclick不会触发Jquery

Question

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 problem? code:

<script>
    $(document).ready(function(){
        $("#add").click(function() {
            $(".no_border").append("<br /><label>Co-author email:</label><input type='text' name='author_email'/><label>Co-author Level:</label><input type='text' name='author_level'/><input id='save' type='button'name='save' value='Add'/>");
    });
});
</script>
<?php
    while($row = mysql_fetch_assoc($co_authors)) {
        echo "<tr>
            <td>{$row['author_email']}</td>
            <td>{$row['coauthor_level']}</td>";
            ?><td><button class='remove' id='remove' name='remove' email="<?php echo $row['author_email'] ?>"
            paper="<?php echo $row['paper_id'] ?>">Remove</button></td>
            </tr><?
            ?><td colspan="3" class="no_border"><button class="add" name="add"></button>
            <label id="add" class="cursor_pointer"> Add more co-authors</label></td><?
    }
?>

Answer 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 ) {} );