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 相关文章推荐
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
js实现跨域的多种方法
Dec 25 Javascript
JavaScript仿网易选项卡制作代码
Oct 06 Javascript
bootstrap模态框示例代码分享
May 17 Javascript
原JS实现banner图的常用功能
Jun 12 Javascript
JavaScript循环_动力节点Java学院整理
Jun 28 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
详解jenkins自动化部署vue
May 14 Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 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
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
JavaScript经典效果集锦
2010/07/06 Javascript
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
Require.JS中的几种define定义方式示例
2017/06/01 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
微信小程序入门之指南针
2020/10/22 Javascript
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
Python中使用双下划线防止类属性被覆盖问题
2019/06/27 Python
python爬虫添加请求头代码实例
2019/12/28 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
全球知名鞋履品牌授权零售商:Journeys
2016/09/17 全球购物
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
2019年Java面试必问之经典试题
2012/09/12 面试题
linux面试题参考答案(8)
2015/08/11 面试题
服务行业个人求职的自我评价
2013/12/12 职场文书
解除劳动合同协议书
2014/04/14 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
创先争优公开承诺书
2014/08/30 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
离婚协议书的范本
2015/01/27 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
opencv 分类白天与夜景视频的方法
2021/06/05 Python