7

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>
1
  • i tried to find on SO and also tried with solution from SO.. But after i am getting same problem.
    – Naresh
    Dec 19, 2012 at 6:17

2 Answers 2

6

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
});
0
1

You have to bind click event for the button :-

 $("#sendMailBtn").click(function() {
      alert("Handler for .click() called.");
    });

So your code will basically should be like :-

$(document).ready(function() {

    $("#sendMailBtn").click(function() {
      alert("Handler for .click() called.");
    });

    $('#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'/></td></tr>");

            });

});

Check the updated fiddle

Note:- i have removed testFunction() from HTML.

3
  • it is working check the fiddle i have created for you.(tested in mozilla and chrome)
    – Pranav
    Dec 19, 2012 at 6:28
  • thakx bhai... but i need to run event after append means delegate event handler for upcoming dom element.. thnakx for ur support
    – Naresh
    Dec 19, 2012 at 6:39
  • 1
    okay ..then you need to remove onclick() event from append() since you have already bind the click event before.
    – Pranav
    Dec 19, 2012 at 6:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.