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 相关文章推荐
将string解析为json的几种方式小结
Nov 11 Javascript
jQuery产品间断向下滚动效果核心代码
May 08 Javascript
修复bash漏洞的shell脚本分享
Dec 31 Javascript
jQuery大于号(&gt;)选择器的作用解释
Jan 13 Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 Javascript
vue弹窗插件实战代码
Sep 08 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
js get和post请求实现代码解析
Feb 06 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
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
JavaScript事件处理程序详解
2017/09/19 Javascript
vue-cli中的webpack配置详解
2017/09/25 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
Python的Django框架中使用SQLAlchemy操作数据库的教程
2016/06/02 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
python列表list保留顺序去重的实例
2018/12/14 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
python GUI计算器的实现
2020/10/09 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
项目经理的岗位职责
2013/11/23 职场文书
毕业自荐信
2013/12/16 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
竞选稿之小学班干部
2019/10/31 职场文书