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 ...
随机推荐
- ZOJ 3633 Alice's present 倍增 区间查询最大值
Alice's present Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/vi ...
- TOJ 4325 RMQ with Shifts / 线段树单点更新
RMQ with Shifts 时间限制(普通/Java):1000MS/3000MS 运行内存限制:65536KByte 描述 In the traditional RMQ (Range M ...
- [置顶] 递归 加引用 实现tree 和 无限级菜单
<?php class k_model_menu_menu { private $data = array(); private $rdata = array(); pr ...
- javascript常用方法整理--数组篇
1. arrayObject.slice(start,end) 从已有的数组中返回选定的元素 参数 描述 start 必需.规定从何处开始选取.如果是负数,那么它规定从数组尾部开始算起的位置.也就是说 ...
- 【双十一到了,准备买书了么?】推荐几本c/c++入手的书籍
<C和指针>c语言的经典之作,全书共18章,覆盖了数据.语句.操作符和表达式.指针.函数.数组.字符串.结构和联合等几乎所有重要的C编程话题.而且每章后面都有基础回顾已经较多例程,很适合入 ...
- css笔记15:盒子模型
1.流 流:html元素在网页中显示的顺序 标准流:在html文件中,写在前面的元素在前面显示,写在后面的html元素在后面显示. 非标准流:在html之中,当某个元素脱离了标准流,那么它处于非标准流 ...
- struts2.1笔记03:AOP编程和拦截器概念的简介
1.AOP编程 AOP编程,也叫面向切面编程(也叫面向方面):Aspect Oriented Programming(AOP),是目前软件开发中的一个热点,也是Spring框架中的一个重要内容.利用A ...
- JavaScript 正则表达式相关理解
1.使用正则的test.exec方法而且带有g属性进行连续匹配的时候, 如果每次匹配之前 lastIndex属性没有清零. <script> var str='123qweQWE125|2 ...
- 《Cortex-M0权威指南》之绪论
转载请注明来源:cuixiaolei的技术博客 1.1 为什么要选择Cortex-M0 为了满足现代超低功耗微控制器和混合信号设备的需要,ARM推出了Cortex-M0处理器.Cortex-M0在保持 ...
- [课程相关]homework-01
我的github博客大概是一年前创建的.现在已经想不起来当时是怎么接触到github的了,大概是从某一个网站看到的吧.注册完帐号以后很长一段时间都没有真正的去使用github,主要原因就是网站是英文的 ...