写网页的时候常常需要根据实际情况添加新的元素,然后这些新元素还需要绑定已有的事件,如:有一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动态添加元素并绑定事件的更多相关文章

  1. 解决jquery动态创建元素绑定事件失效问题

    存在问题 在我们使用jquery动态创建元素后往往会遇到一些问题,如: 给.button按钮绑定了点击时间,执行alert:(1); 点击事件代码如下: <script>$("# ...

  2. jquery 动态 新增 元素 绑定事件

    在jquery1.7以前使用live方法进行绑定,由于年代久远,这里就不介绍了. 在jquery1.7以后我们使用的on方法,这里需要注意的一点就是:如果想让动态生成的元素,都绑上事件,on前面的选择 ...

  3. Vue2.x与bootsrap-table动态添加元素和绑定事件无效

    一.问题:     最近在使用vue与bootstrap-table结合生成表格时,按以前的经验----每列数据可用formatter:function(value,row,index){}进行一些其 ...

  4. jquery动态添加元素无法触发绑定事件的解决方案。

    jquery动态添加元素无法触发绑定的事件的解决方案. ╭(●`∀´●)╯二狗最近在工作中遇到一个问题,即当用jquery动态添加元素后,发现给动态添加的元素却无法触发事件(╯#-_-)╯╧═╧ ( ...

  5. jQuery动态添加元素事件

    在项目中遇到需要jQuery动态添加元素的事件,做了一个demo,方便以后遇到相同的问题可以用上: <!DOCTYPE html> <html> <head> &l ...

  6. jQuery如何给body绑定事件?

    jQuery如何给body绑定事件? 代码如下: $(document).bind("resize", function () { alert("php-note.com ...

  7. JQuery在循环中绑定事件的问题详解

    JQuery在循环中绑定事件的问题详解 有个页面上需要N个DOM,每个DOM里面的元素ID都要以数字结尾,比如说 ? 1 2 3 <input type="text" nam ...

  8. jquery动态添加元素无法触发绑定的事件的解决方案

    方法一:绑定live事件(live事件只在jquery1.9以下才支持,高版本不支持). //jquery 1.9(不包括1.9)以下可以 $(".btn").live(" ...

  9. Jquery 在动态元素上绑定事件

    弄了很久却没有弄出来,感觉没有错,但是动态元素上的事件根本就不响应,代码如下: <input type="button" id="btnyes" valu ...

随机推荐

  1. Js Pattern - Namespace Pattern

    bad code // BEFORE: 5 globals // Warning: antipattern // constructors function Parent() {} function ...

  2. Codeforces Gym 100002 C "Cricket Field" 暴力

    "Cricket Field" Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/1000 ...

  3. [Javascript] Other functor

    EventStream: You can use RxJS, BaconJS or any reactive programming lib you want: var id_s = map(func ...

  4. Android Configuration change属性

    问题:横竖屏切换时Activity的生命周期? 答案: 1.不设置Activity的android:configChanges时,切屏会重新调用各个生命周期,切横屏时会执行一次,切竖屏时会执行两次 2 ...

  5. MySQL 行子查询(转)

    MySQL 行子查询 行子查询是指子查询返回的结果集是一行 N 列,该子查询的结果通常是对表的某行数据进行查询而返回的结果集. 一个行子查询的例子如下: SELECT * FROM table1 WH ...

  6. oc-05-对象的创建

    // 11-[掌握]创建一个对象并访问成员变量 #import <Foundation/Foundation.h> //声明 @interface Person : NSObject//类 ...

  7. SQL语言的四大分类

    以下是sql数据语言类型的关键词: 1.数据定义语言DDL create.drop.alter.truncate 2.数据查询语言DQL  select 3.数据操纵语言DML insert.dele ...

  8. 数据结构笔记02:Java面试必问算法题

    1. 面试的时候,栈和队列经常会成对出现来考察.本文包含栈和队列的如下考试内容: (1)栈的创建 (2)队列的创建 (3)两个栈实现一个队列 (4)两个队列实现一个栈 (5)设计含最小函数min()的 ...

  9. pycharm中文乱码的问题

    这几天一直挺困扰的是使用pycharm之后一直对中文的乱码,即使添加了很多别人说的类似于#coding:utf-8的语句但是还是报错,让我抓狂,但是今天终于找到了解决的办法,还真的是让人很高兴啊,哈哈 ...

  10. [转]DataTable用中使用Compute 实现简单的DataTable数据的统计

    本文转自:http://blog.csdn.net/zwxrain/article/details/252285 調用格式: object DataTable.Compute(string expre ...