jQuery动态添加元素并绑定事件
写网页的时候常常需要根据实际情况添加新的元素,然后这些新元素还需要绑定已有的事件,如:有一ul,点击其中某 li,根据其 id 或 value 等获取新的数据列表,并新建 ul 显示,新 ul 中的 li 标签绑定相同的点击事件,具有相同功能。
问题1 新建标签未绑定方法,$("li").bind("click",clickLi) 只是在 document ready 的时候执行一次,新增的 li 并没有绑定 clickLi 方法:
$(function() {
$("li").bind("click",clickLi);
function clickLi(e){
//添加新标签
}
}
问题2 重复绑定,$("li") 为一个数组,包括文档中所有的 li ,所以,会导致旧标签的重复绑定,执行多次 clickLi 方法:
$(function() {
$("li").bind("click",clickLi);
function clickLi(e){
//添加新标签
$("li").bind("click",clickLi);
}
}
所以,对于新增元素要绑定事件时,(1)新增一次,绑定一次;(2)只绑定新增元素,使用 id、class 等选择器。
另外,还可以在新增元素时,将对应的事件写到 html 中,如 onclick=""。
jQuery动态添加元素并绑定事件的更多相关文章
- 解决jquery动态创建元素绑定事件失效问题
存在问题 在我们使用jquery动态创建元素后往往会遇到一些问题,如: 给.button按钮绑定了点击时间,执行alert:(1); 点击事件代码如下: <script>$("# ...
- jquery 动态 新增 元素 绑定事件
在jquery1.7以前使用live方法进行绑定,由于年代久远,这里就不介绍了. 在jquery1.7以后我们使用的on方法,这里需要注意的一点就是:如果想让动态生成的元素,都绑上事件,on前面的选择 ...
- Vue2.x与bootsrap-table动态添加元素和绑定事件无效
一.问题: 最近在使用vue与bootstrap-table结合生成表格时,按以前的经验----每列数据可用formatter:function(value,row,index){}进行一些其 ...
- jquery动态添加元素无法触发绑定事件的解决方案。
jquery动态添加元素无法触发绑定的事件的解决方案. ╭(●`∀´●)╯二狗最近在工作中遇到一个问题,即当用jquery动态添加元素后,发现给动态添加的元素却无法触发事件(╯#-_-)╯╧═╧ ( ...
- jQuery动态添加元素事件
在项目中遇到需要jQuery动态添加元素的事件,做了一个demo,方便以后遇到相同的问题可以用上: <!DOCTYPE html> <html> <head> &l ...
- jQuery如何给body绑定事件?
jQuery如何给body绑定事件? 代码如下: $(document).bind("resize", function () { alert("php-note.com ...
- JQuery在循环中绑定事件的问题详解
JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...
- jquery动态添加元素无法触发绑定的事件的解决方案
方法一:绑定live事件(live事件只在jquery1.9以下才支持,高版本不支持). //jquery 1.9(不包括1.9)以下可以 $(".btn").live(" ...
- Jquery 在动态元素上绑定事件
弄了很久却没有弄出来,感觉没有错,但是动态元素上的事件根本就不响应,代码如下: <input type="button" id="btnyes" valu ...
随机推荐
- Codeforces Round #179 (Div. 1) A. Greg and Array 离线区间修改
A. Greg and Array Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/295/pro ...
- Educational Codeforces Round 2 E. Lomsat gelral 启发式合并map
E. Lomsat gelral Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/600/prob ...
- head first c<11>初探网络编程上
server连接网络四部曲. 为了与外界沟通,c程序用数据流读写字节.比較经常使用的数据流有标准输入.标准输出.文件等. 假设想写一个与网络通信的程序.就须要一种新的数据流----------套接字. ...
- [AngularJS] Using ngModel in Custom Directives
You can use ngModel in your own directives, but there are a few things you'll need to do to get it w ...
- [Effective C++ --033]避免遮掩继承而来的名称
这一章一直在想怎么写,因为比较基础,很容易理解,就按照需要来写吧. 假设我们有这样一个类: class Base { private: int x; public: ; virtual void mf ...
- [Effective C++ --029]为“异常安全”而努力是值得的
假设有个class用来表现夹带背景图案的GUI菜单单,这个class用于多线程环境,所以它有个互斥器(mutex)作为并发控制用: class PrettyMenu{ public: ... void ...
- 已知json类型根据类型封装集合
1编写帮助类根绝url得到json public static string Post(string url) { string strURL = url; //创建一个HTTP请求 HttpWebR ...
- Apache以及PHP的默认编码问题解决(详解)
如果你在网上搜索 “apache配置”,搜到的页面大多都会建议你在httpd.conf中加上这么一句:AddDefaultCharset GB2312.对于新手而且是只用GB2312编码的开发人来说, ...
- vim中光标的前进和后退
流行的文本编辑器通常都有前进和后退功能,可以在文件中曾经浏览过的位置之间来回移动.在 vim 中使用 Ctrl-O 执行后退,使用 Ctrl-I 执行前进.相关帮助: :help CTRL-O :h ...
- 数据库SQLite应用
1.导入SQLite库和头文件 #import <sqlite3.h> 2.打开数据库,如果在打开的时候遇到了问题,则关闭它并抛出一个断言错误. sqlite3 * database; i ...