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


Posted in Javascript onJuly 30, 2015

用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delete)。

具体不多说了,请看下面的代码吧。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试</title>
<script type="text/javascript"
src="../resources/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
//动态添加
$(".add").on("click",function(){
console.log("进来了");
$(".info").append('<div class="delete"><h3>单击我来删除我</h3></div>');
});
 //对动态添加的元素添加事件-删除
$(".info").on("click",".delete",function(){
console.log("进来了Delete!");
$(this).remove();
});
 }); 
</script>
 </head>
<body>
 <h2 class='add'>单击我添加动态元素</h2>
 <div class="info"></div>
 </body>
</html>

以上代码就是本文对jquery append 动态添加的元素事件on 不起作用的解决方案,希望对大家学习有所帮助。

Javascript 相关文章推荐
添加JavaScript重载函数的辅助方法2
Jul 04 Javascript
jquery ajaxSubmit 异步提交的简单实现
Feb 28 Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 Javascript
JS控制HTML元素的显示和隐藏的两种方法
Sep 27 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
May 02 Javascript
详解node服务器中打开html文件的两种方法
Sep 18 Javascript
微信小程序的生命周期的详解
Oct 19 Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 Javascript
vue中的v-if和v-show的区别详解
Sep 01 Javascript
Vue+Element-U实现分页显示效果
Nov 15 Javascript
jQuery代码实现发展历程时间轴特效
Jul 30 #Javascript
使用js复制链接中的部分文字的方法
Jul 30 #Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 #Javascript
js代码实现随机颜色的小方块
Jul 30 #Javascript
js代码验证手机号码和电话号码是否合法
Jul 30 #Javascript
javascript设计模式之对象工厂函数与构造函数详解
Jul 30 #Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 #Javascript
You might like
为查询结果建立向后/向前按钮
2006/10/09 PHP
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
php中将数组转成字符串并保存到数据库中的函数代码
2013/09/29 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
js判断字符长度以及中英文数字等
2013/12/31 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
Javascript递归打印Document层次关系实例分析
2015/05/15 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
2016/01/06 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
layui表格实现代码
2017/05/20 Javascript
详解AngularJS 模块化
2017/06/14 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
简单谈谈python的反射机制
2016/06/28 Python
python中numpy.zeros(np.zeros)的使用方法
2017/11/07 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
利用python如何处理nc数据详解
2018/05/23 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
Python测试模块doctest使用解析
2019/08/10 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
职业生涯规划书基本格式
2014/01/06 职场文书
获奖感言怎么写
2015/07/31 职场文书
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL
十大最帅动漫男主 碓冰拓海上榜,第一是《灌篮高手》男主角
2022/03/18 日漫