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随即打乱数组实现代码
Dec 03 Javascript
Javascript 函数parseInt()转换时出现bug问题
May 20 Javascript
js实现div闪烁原理及实现代码
Jun 24 Javascript
一个支持任意尺寸的图片上下左右滑动效果
Aug 24 Javascript
Javascript控制input输入时间格式的方法
Jan 28 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 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
用php和MySql来与ODBC数据连接
2006/10/09 PHP
PHP生成静态页面详解
2006/11/19 PHP
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
php中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
PHP文件上传之多文件上传的实现思路
2016/01/27 PHP
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
没有document.getElementByName方法
2013/08/19 Javascript
JQuery异步获取返回值中文乱码的解决方法
2015/01/29 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
基于JS实现数字+字母+中文的混合排序方法
2016/06/06 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
python动态参数用法实例分析
2015/05/25 Python
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
解决Django no such table: django_session的问题
2020/04/07 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
大一期末自我鉴定
2013/12/13 职场文书
教师节宣传方案
2014/05/23 职场文书
高中运动会广播稿
2014/09/16 职场文书
乡党委干部党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
简单租房协议书
2014/10/21 职场文书
关于颐和园的导游词
2015/01/30 职场文书