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 相关文章推荐
jQuery load方法用法集锦
Dec 06 Javascript
jquery validate poshytip 自定义样式
Nov 26 Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 Javascript
js实现键盘控制DIV移动的方法
Jan 10 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
JS+CSS实现的拖动分页效果实例
May 11 Javascript
深入理解React高阶组件
Sep 28 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
浅谈webpack+react多页面开发终极架构
Nov 11 Javascript
浅析JavaScript 函数防抖和节流
Jul 13 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
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
文本框的字数限制功能jquery插件
2009/11/24 Javascript
jquery取消选择select下拉框示例代码
2014/02/22 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
详解js数组的完全随机排列算法
2016/12/16 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
JS验证不重复验证码
2017/02/10 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
Python实现把xml或xsl转换为html格式
2015/04/08 Python
python实现简单五子棋游戏
2019/06/18 Python
python把转列表为集合的方法
2019/06/28 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
Django实现简单的分页功能
2021/02/22 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
Yahoo-PHP面试题3
2012/01/14 面试题
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
2014年母亲节寄语
2014/05/07 职场文书
售后服务承诺书模板
2014/05/21 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS