Question

我正在使用html生成append()然后我试图在点击按钮上提醒，但它失败了。

我的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>

Answer 1

更改行

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

Answer 2

您必须为按钮绑定点击事件： -

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

所以你的代码基本上应该是这样的： -

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

            });

});

检查更新后的fiddle

注意： - 我已从HTML中删除了testFunction（）。

JavaScript onclick事件失败

2 个答案: