append动态生成的元素,无法触发事件的原因及解决方案
今天笔者在实现一个简单的动态生成元素功能的时候,发现了一个问题:
使用append动态生成的元素事件绑定失效了。

查阅资料后发现: click(fn)当选中的选择器被点击时触发回调函数fn。只针对与页面已存在的选择器。而新添加的元素自然没有绑定到事件。
解决方案1:
单独为新添加的元素绑定事件,显然这样的操作存在代码冗余,不够简洁,这时我们可用看一看第二种解决方案。

解决方案2:
使用$(document).on('事件类型','要选择的元素',function(){})方法为元素绑定事件
on方法包含很多事件,点击,双击等等事件。与click(fn)相比,二者在绑定静态控件时没有区别,但是如果面对动态产生的控件,只有 on() 能成功的绑定到动态控件中。

这样动态元素的事件绑定问题就可以解决了。
append动态生成的元素,无法触发事件的原因及解决方案的更多相关文章
- append()方法生成的元素绑定的事件失效解决办法
我使用append()方法动态生成的a链接的click事件没有起效果,查找了资料,了解到,我使用的onclick方法绑定的事件对动态生成的元素是无效的,解决办法如下: 使用事件委托,并且要用on来绑定 ...
- js动态追加的元素如何触发事件
一般通过js或者jQuery动态添加的元素标签,通过该元素标签.class.id触发事件,是无效的.如下所示: <body> <input type="text" ...
- JQ动态生成的元素,原事件绑定失效
Old Code: $('code').click(function () { console.log($(this).text()); }); New Code:(.container 是<c ...
- Angular如何给动态生成的元素绑定事件
在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听. 举例来说: angular ...
- Jquery中动态生成的元素没有点击事件或者只有一次点击事件
今天用jq做动态生成的元素的click事件时,click只执行了一次,当然有些朋友可能根本没执行, 执行了一次的原因是因为可能有函数加载了一遍,一次都没执行的可能是没绑定对象或者jq版本问题, 动态生 ...
- jQuery对于动态生成的元素绑定无效的问题~~
问题:很多时候发现,对动态生成的元素绑定click事件是无效的- 原因:直接绑定到动态生成的元素是无效的,是因为Jquery扫描文档找出所有的$(‘’)元素,并把函数绑定到每个元素的click事件上, ...
- js/jq 动态添加的元素不能触发绑定事件解决方案
<!-- Copyright 2017-10-27, Jachin QQ: 381558301 Email: 381558301@qq.com 请看看你们的版本并对号入座: jquery1.6版 ...
- jquery给动态生成的元素绑定事件,on函数
首先先解释一下什么是动态生成的元素:动态生成的元素即我们用jquery的内部插入函数append()所生成的html代码.相对的也有静态生成的元素:即直接编写在页面的html代码. 下面通过例子来讲解 ...
- jquery动态生成的元素添加事件的方法
动态生成的元素如果要添加事件,要写成 $(document).on("click", "#txtName", function() { alert(this.v ...
随机推荐
- 倍增O(1)求区间&值与|值
;i<=n;++i) f[i][]=a[i],g[i][]=a[i]; ;(<<j)<=n;++j) ;(i+(<<j)-)<=n;i++) { f[i][j ...
- android 任务栈及启动模式
1.一个应用程序一般都是由多个activity组成的.2.任务栈(task stack)(别名back stack后退栈) 记录存放用户开启的activity的.3.一个应用程序一被开启系统就给他分配 ...
- 动态淀粉质(划掉)题单&简要题解
简介 动态点分治的思想:还不太清楚诶怎么办. 大概是通过降低树高来降低每次修改和询问的复杂度吧,还可以把树上一个连通块的信息统计到一个点(重心)上.具体实现方式和普通的静态点分治没有太大的区别,只是把 ...
- tree 命令
LMXMN117:Mac Driver will.wei$ tree -N >/tmp/savs.txt (1)tree -a 显示所有文件和目录 (2)tree -d 显示目录 ...
- loadrunner常用函数整理
1.int web_reg_save_param("参数名","LB=左边界","RB=右边界",LAST); //注册函数,在参数值出 ...
- ListView 九宫格布局实现
1.效果图 2.数据 SettingData.json { "data": [{ "icon":"setting", "title ...
- mongotemplate 简单使用
怎么说呢,工作需要,不可能给你慢慢学的时间,一切以先解决当前jira为前提, mondb 安装不说了网上一搜就有,推荐图形管理界面 robo3t 比较直观 1.多条件查询这个比较简单 有两种方法 1C ...
- 【AndroidFramework】ATV9遥控器红外模式下,机顶盒在假待机阶段会响应遥控器语音键
[问题描述] 测试部反馈,红外模式下,按power键进入假待机,按红外语音键会唤醒. 背景交代:红外语言键是我们自定义的按键,键值225.在红外模式下按会弹提示框"没连蓝牙,请连蓝牙使用语音 ...
- 【ABAP系列】SAP WEB GUI的实现,SAP在网页中使用
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP WEB GUI的实现,SAP ...
- 002--PowerDesigner显示注释comment
PowerDesigner显示注释comment 参考博客:https://blog.csdn.net/chao_1990/article/details/52620206 原始样式 显示操作 调出执 ...