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 相关文章推荐
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
Jul 27 Javascript
jQuery的ajax和遍历数组json实例代码
Aug 01 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
微信小程序 条件渲染详解
Oct 09 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 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自动生成后台导航网址的最佳方法
2013/08/27 PHP
php实现文本数据导入SQL SERVER
2015/05/17 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
Iframe 自动适应页面的高度示例代码
2014/02/26 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
JavaScript控制table某列不显示的方法
2015/03/16 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
boostrapTable的refresh和refreshOptions区别浅析
2017/01/22 Javascript
ReactNative列表ListView的用法
2017/08/02 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
Python OS模块常用函数说明
2015/05/23 Python
python插入排序算法实例分析
2015/07/03 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
python实现共轭梯度法
2019/07/03 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
使用Python FastAPI构建Web服务的实现
2020/06/08 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
python 爬取小说并下载的示例
2020/12/07 Python
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
幼儿园小班教师随笔
2015/08/14 职场文书
pytest配置文件pytest.ini的详细使用
2021/04/17 Python