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 ...
随机推荐
- Android PhoneGap源码分析——白名单
对于单独的Web app应用来说,加载进来的url一般不能保证它的安全性.那么如何来处理url安全性的问题呢. 让我们来看看PhoneGap是如何做的. PhoneGap采用了白名单的形式,认为在白名 ...
- 配置Log4j(非常具体)
来自: http://www.blogjava.net/zJun/archive/2006/06/28/55511.html Log4J的配置文件(Configuration File)就是用来设置记 ...
- javascript面向对象学习笔记——创建对象(转)
工厂模式 该模值抽象了创建具体对象de过程.用函数来封装噫特定接口创建对象的细节. function createPerson(name,age,job){ var o=new Object(); o ...
- C# Tcp协议收发数据
运行这个程序前需要先关闭Windows防火墙,Win7系统关闭防火墙的方法是在控制面板的“控制面板\系统和安全\Windows 防火墙\自定义设置”路径中,将“家庭或工作(专用)网络位置设置”和“公用 ...
- Jordan Lecture Note-1: Introduction
Jordan Lecture Note-1: Introduction 第一部分要整理的是Jordan的讲义,这份讲义是我刚进实验室时我们老师给我的第一个任务,要求我把讲义上的知识扩充出去,然后每周都 ...
- 关于Service常驻内存不被清理的解决方法.
众所周知, Service是跑后台的. 但是有些Rom厂商把一键清理做的真是太好用了, 以至于一键清理变成了一种习惯, Service已经变的不再是Service了. 那为什么像诸如360, 微信, ...
- RTB实时竞价广告是未来趋势
原文:http://www.inboundjournals.com/rtb-real-time-bidding-the-future-of-online-advertising/ [资讯图表] RTB ...
- Linux内核加载全流程
无论是Linux还是Windows,在加电后的第一步都是先运行BIOS(Basic Input/Output System)程序——不知道是不是所以的电脑系统都是如此.BIOS保存在主板上的一个non ...
- 10+ commonly using find command switches with example Unix/Linux
http://crybit.com/find-command-usage-with-example-unixlinux/ find command is one of the best search ...
- 在openshift上使用django+postgresql
openshift上用的是django 1.7,数据库选择的是postgresql 9.2 本地开发用的是sqlite3数据库,发布到openshift上后是没有数据的(本地的sqlite3数据库里的 ...