jquery – JavaScript onclick事件失败

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

我的JavaScript添加之前

  1. $(document).ready(function() {
  2.  
  3. function testFunction() {
  4. alert("simplty alert");
  5. }
  6.  
  7. $('#selUsersToSendMail').click(function() {
  8. var selUsersArray = [];
  9.  
  10. $(".tableBodyConfirmUser1").html('');
  11.  
  12. $(".selUsersClass:checked").each(function() {
  13. var ids = $(this).attr('value');
  14. $(".tableBodyConfirmUser1").append("<tr id='subsUserId_" + ids + "' class='subsUserId_" + ids + "'>" + $("#selUserId_" + ids).html() + "</tr>");
  15.  
  16. selUsersArray.push(ids);
  17. });
  18.  
  19. $(".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>");
  20.  
  21. });
  22.  
  23. });​

附加后我的HTML

  1. <table id="table-design" border="1" cellspacing="0" cellpadding="0" align="left" width='50%'>
  2. <thead>
  3. <tr>
  4. <th scope="col" id="">Select</th>
  5. <th scope="col" id="">Name</th>
  6. <th scope="col" id="">Email</th>
  7. </tr>
  8. </thead>
  9. <tbody class='tableBodyConfirmUser'>
  10. <tr id='selUserId_3'>
  11. <td valign="top" width="319"><input type="checkBox" name='selUsr' value = "3" class='selUsersClass'/></td>
  12. <td valign="top" width="319"><a href='#' id='name' class='nameClass'>saurav</a></td>
  13. <td valign="top" width="319"><a href='#' id='email'>saurav1214@gmail.com</a></td>
  14. </tr>
  15. <tr id='selUserId_4'>
  16. <td valign="top" width="319"><input type="checkBox" name='selUsr' value = "4" class='selUsersClass'/></td>
  17. <td valign="top" width="319"><a href='#' id='name' class='nameClass'>bhupinder</a></td>
  18. <td valign="top" width="319"><a href='#' id='email'>bhupi@gmail.com</a></td>
  19. </tr>
  20. <tr>
  21. <td valign="top" colspan="3"><input type="button" style='width:50px;'name='sendMailBtn' id='sendMailBtn' value='Select' onclick='testFunction();'/>
  22. </td>
  23. </tr>
  24. </tbody>
  25. </table>

解决方法

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

  1. $(".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并写下:

  1. $(document).ready(function() {
  2.  
  3. // delegate event handler for upcoming dom element
  4. // aka live event
  5.  
  6. $('.tableBodyConfirmUser1').on('click','#sendMailBtn',function() {
  7. alert('Button clicked');
  8. });
  9.  
  10. // your code
  11. });

猜你在找的jQuery相关文章