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 相关文章推荐
jquery win 7透明弹出层效果的简单代码
Aug 06 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
JavaScript运动减速效果实例分析
Aug 04 Javascript
基于jquery实现图片放大功能
May 07 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
详解JavaScript添加给定的标签选项
Sep 17 Javascript
前端路由&amp;webpack基础配置详解
Jun 10 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 Javascript
vue-router 控制路由权限的实现
Sep 24 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 基础教程(三)
2006/10/09 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
JavaScript声明变量时为什么要加var关键字
2014/09/29 Javascript
基于javascript实现动态时钟效果
2020/08/18 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
python中的多重继承实例讲解
2014/09/28 Python
python根据文件大小打log日志
2014/10/09 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
python安装教程
2018/02/28 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
使用Pytorch来拟合函数方式
2020/01/14 Python
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
美体小铺法国官方网站:The Body Shop法国
2020/06/04 全球购物
阿玛尼美妆俄罗斯官网:Giorgio Armani Beauty RU
2020/07/19 全球购物
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
如何掌握自荐信格式呢
2013/11/19 职场文书
后勤岗位职责
2013/11/26 职场文书
公司业务员岗位职责
2014/03/18 职场文书
婚内房产协议书范本
2014/10/02 职场文书
银行给客户的感谢信
2015/01/23 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android