JavaScript onclick event failing

Question

I am generating html with append() and then I am trying to simply alert on click button, but it is failing.

My JavaScript Before Appending

$(document).ready(function() {

    function testFunction() {
        alert("simplty alert");
    }

    $('#selUsersToSendMail').click(function() {
        var selUsersArray = [];

        $(".tableBodyConfirmUser1").html('');

        $(".selUsersClass:checked").each(function() {
            var ids = $(this).attr('value');
            $(".tableBodyConfirmUser1").append("<tr id='subsUserId_" + ids + "' class='subsUserId_" + ids + "'>" + $("#selUserId_" + ids).html() + "</tr>");

            selUsersArray.push(ids);
        });

        $(".tableBodyConfirmUser1").append("<tr><td valign='top' colspan='3'><input type='button' style='width:50px;' name='sendMailBtn' id='sendMailBtn' class='sendMailBtn' value='Select' onclick='testFunction();'/></td></tr>");

    });

});​

My HTML after appending

<table id="table-design" border="1" cellspacing="0" cellpadding="0" align="left" width='50%'>
    <thead>
        <tr>    
            <th scope="col" id="">Select</th>
            <th scope="col" id="">Name</th>
            <th scope="col" id="">Email</th>
        </tr>
    </thead>
    <tbody class='tableBodyConfirmUser'>
        <tr id='selUserId_3'>
            <td valign="top" width="319"><input type="checkbox" name='selUsr' value = "3" class='selUsersClass'/></td>
            <td valign="top" width="319"><a href='#' id='name' class='nameClass'>saurav</a></td>
            <td valign="top" width="319"><a href='#' id='email'>[email protected]</a></td>
        </tr>
        <tr id='selUserId_4'>
            <td valign="top" width="319"><input type="checkbox" name='selUsr' value = "4" class='selUsersClass'/></td>
            <td valign="top" width="319"><a href='#' id='name' class='nameClass'>bhupinder</a></td>
            <td valign="top" width="319"><a href='#' id='email'>[email protected]</a></td>
        </tr>                               
        <tr>
            <td valign="top" colspan="3"><input type="button" style='width:50px;'name='sendMailBtn' id='sendMailBtn' value='Select' onclick='testFunction();'/> 
            </td>
        </tr>
    </tbody>
</table>

Answer 1

Change the line

$(".tableBodyConfirmUser1").append("<tr><td valign='top' colspan='3'><input type='button' style='width:50px;' name='sendMailBtn' id='sendMailBtn' class='sendMailBtn' value='Select' onclick='testFunction();'/></td></tr>");

to

$(".tableBodyConfirmUser1").append("<tr><td valign='top' colspan='3'><input type='button' style='width:50px;' name='sendMailBtn' id='sendMailBtn' class='sendMailBtn' value='Select'/></td></tr>");

ie. remove the onclick and write this:

$(document).ready(function() {

     // delegate event handler for upcoming dom element
     // aka live event

     $('.tableBodyConfirmUser1').on('click', '#sendMailBtn', function() {
        alert('Button clicked');
     });

     // your code
});