jquery – JavaScript onclick事件失败

前端之家收集整理的这篇文章主要介绍了jquery – JavaScript onclick事件失败前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用append()然后生成html
我试图在点击按钮上提醒,但它失败了.

我的JavaScript添加之前

$(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>");

    });

});​

附加后我的HTML

<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'>saurav1214@gmail.com</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'>bhupi@gmail.com</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>

解决方法

改变线
$(".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>");

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

即.删除onclick并写下:

$(document).ready(function() {

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

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

     // your code
});

猜你在找的jQuery相关文章