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 相关文章推荐
用prototype实现的简单小巧的多级联动菜单
Mar 24 Javascript
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
Jquery+JSon 无刷新分页实现代码
Apr 01 Javascript
javascript中数组array及string的方法总结
Nov 28 Javascript
javascript事件冒泡和事件捕获详解
May 26 Javascript
javascript表格的渲染组件
Jul 03 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 Javascript
详解react-router4 异步加载路由两种方法
Sep 12 Javascript
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
深入理解Node内建模块和对象
Mar 12 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
Vue+axios封装请求实现前后端分离
Oct 23 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
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
PHP 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
php使用gzip压缩传输js和css文件的方法
2015/07/29 PHP
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
vue.js中npm安装教程图解
2018/04/10 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
2018/05/28 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
[01:47]2018年度DOTA2最具人气解说-完美盛典
2018/12/16 DOTA
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
讲解Python中fileno()方法的使用
2015/05/24 Python
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
Python遍历目录中的所有文件的方法
2016/07/08 Python
Pycharm学习教程(4) Python解释器的相关配置
2017/05/03 Python
解决Python安装时报缺少DLL问题【两种解决方法】
2019/07/15 Python
python基于socket进行端口转发实现后门隐藏的示例
2019/07/25 Python
wxPython实现带颜色的进度条
2019/11/19 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
专科毕业生求职简历的自我评价
2013/10/12 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
四群教育工作总结
2015/08/10 职场文书