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 相关文章推荐
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
Jul 31 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
js获取通过ajax返回的map型的JSONArray的方法
Jan 09 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
jquery任意位置浮动固定层插件用法实例
May 29 Javascript
深入浅析JS Function()构造函数
Aug 22 Javascript
JS实现的几个常用算法
Nov 12 Javascript
基于JavaScript实现自定义滚动条
Jan 25 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
Apr 13 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
js实现简单的倒计时
Jan 28 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
html中select语句读取mysql表中内容
2006/10/09 PHP
PHP图片上传代码
2013/11/04 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
微信公众平台DEMO(PHP)
2016/05/04 PHP
js里的prototype使用示例
2010/11/19 Javascript
javascript工具库代码
2012/03/29 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
javascript按顺序加载运行js方法
2017/12/01 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
js实现随机抽奖
2020/03/19 Javascript
解决vue-router 嵌套路由没反应的问题
2020/09/22 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
详解Python pygame安装过程笔记
2017/06/05 Python
Python日期时间Time模块实例详解
2019/04/15 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
Python企业编码生成系统总体系统设计概述
2019/07/26 Python
python线程的几种创建方式详解
2019/08/29 Python
使用python远程操作linux过程解析
2019/12/04 Python
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
开工仪式主持词
2014/03/20 职场文书
申报材料格式
2014/12/30 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis