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脚本实现Web页面信息交互
Dec 21 Javascript
jQuery Div中加载其他页面的实现代码
Feb 27 Javascript
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
jquery预览图片实现鼠标放上去显示实际大小
Jan 16 Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
javascript输出AscII码扩展集中的字符方法
Dec 26 Javascript
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
JS动态插入脚本和插入引用外部链接脚本的方法
May 21 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
Vue js with语句原理及用法解析
Sep 03 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
php取得字符串首字母的方法
2015/03/25 PHP
javascript 进度条 实现代码
2009/07/30 Javascript
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
JavaScript prototype对象的属性说明
2010/03/13 Javascript
围观tangram js库
2010/12/28 Javascript
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
js获取url传值的方法
2015/12/18 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
JS数字千分位格式化实现方法总结
2016/12/16 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
2017/01/11 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
Python模块学习 filecmp 文件比较
2012/08/27 Python
Python操作串口的方法
2015/06/17 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
基于Django的ModelForm组件(详解)
2017/12/07 Python
举例讲解Python常用模块
2019/03/08 Python
连接pandas以及数组转pandas的方法
2019/06/28 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
中专生自我鉴定
2013/12/17 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
个人工作保证书
2015/02/28 职场文书
施工现场安全管理制度
2015/08/05 职场文书
优质护理服务心得体会
2016/01/22 职场文书
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android
python可视化大屏库big_screen示例详解
2021/11/23 Python