请选择 进入手机版 | 继续访问电脑版

人人商城开发

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: 活动 交友 discuz
查看: 1138|回复: 0

jquery append 动态添加的元素事件on 不起作用

[复制链接]

40

主题

49

帖子

333

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
333
发表于 2017-11-22 21:33:07 | 显示全部楼层 |阅读模式
用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delete)。
具体不多说了,请看下面的代码吧。
$(".info").on("click",".delete",function(){
console.log("进来了Delete!");}});
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>测试</title>
  6. <script type="text/javascript"
  7. src="../resources/js/jquery-1.11.1.min.js"></script>
  8. <script type="text/javascript">
  9. $(function(){
  10. //动态添加
  11. $(".add").on("click",function(){
  12. console.log("进来了");
  13. $(".info").append('<div class="delete"><h3>单击我来删除我</h3></div>');
  14. });
  15. //对动态添加的元素添加事件-删除
  16. $(".info").on("click",".delete",function(){
  17. console.log("进来了Delete!");
  18. $(this).remove();
  19. });
  20. });
  21. </script>
  22. </head>
  23. <body>
  24. <h2 class='add'>单击我添加动态元素</h2>
  25. <div class="info"></div>
  26. </body>
  27. </html>
复制代码
以上代码就是本文对jquery append 动态添加的元素事件on 不起作用的解决方案,希望对大家学习有所帮助。

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|人人商城

GMT+8, 2020-7-8 21:31 , Processed in 0.075645 second(s), 32 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表