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 居中漂浮广告
Mar 21 Javascript
Javascript string 扩展库代码
Apr 09 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 Javascript
vue实现页面加载动画效果
Sep 19 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
Nuxt.js实战详解
Jan 18 Javascript
vue写一个组件
Apr 09 Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 Javascript
vue-cli系列之vue-cli-service整体架构浅析
Jan 14 Javascript
简单实现节流函数和防抖函数过程解析
Oct 08 Javascript
javascript 数组(list)添加/删除的实现
Dec 17 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
无线电波是什么?它是怎样传输的?
2021/03/01 无线电
php实现图片添加水印功能
2014/02/13 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
微信公众号之主动给用户发送消息功能
2019/06/22 PHP
js中如何把字符串转化为对象、数组示例代码
2013/07/17 Javascript
js中的this关键字详解
2013/09/25 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
mock.js模拟数据实现前后端分离
2019/07/24 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
Vue实现移动端拖拽交换位置
2020/07/29 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
两个元祖T1=('a', 'b'),T2=('c', 'd')使用匿名函数将其转变成[{'a': 'c'},{'b': 'd'}]的几种方法
2019/03/05 Python
Python的形参和实参使用方式
2019/12/24 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
生产车间实习自我鉴定
2013/09/23 职场文书
电子商务自荐书范文
2014/01/04 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
单位委托书怎么写
2014/09/21 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
销售会议开幕词
2015/01/28 职场文书
满月酒邀请函
2015/01/30 职场文书
安徽导游词
2015/02/12 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python
Go中的条件语句Switch示例详解
2021/08/23 Golang