写网页的时候常常需要根据实际情况添加新的元素,然后这些新元素还需要绑定已有的事件,如:有一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. Android开发 MMS支持 创建和编辑MMS

    Composing and editing MMS在Android Mms 应用里面的具体实现形式,或数据结构是SlideshowModel,它是一个每个节点为SlideModel的 ArrayLis ...

  2. [AngularJS] Isolate State Mutations in Angular Components

    Managing state is one of the hardest things to do in any application. Angular 2 tackles this problem ...

  3. iOS 2D绘图详解(Quartz 2D)之Transform(CTM,Translate,Rotate,Scale)

    前言:Quartz默认采用设备无关的user space来进行绘图,当context(画板)建立之后,默认的坐标系原点以及方向也就确认了,可以通过CTM(current transformation ...

  4. fedora 20 注销

    当系统只有一个用户和只有一个桌面环境时,Fedora 20将不会显示Log Out菜单. 如果你确实需要logout,可以通过执行gnome-session-quit命令来logout. 如果你确实需 ...

  5. UNIX基础知识之出错处理

    当UNIX函数出错时,常常会返回一个负值,而且整型变量errno通常被设置为含有附加信息的一个值.例如,open函数如成功执行则返回一个非负文件描述符,如出错则返回-1.在open出错时,有大约15种 ...

  6. iCloud之旅

    1.创建BIDTinyPixDocument类 #import <UIKit/UIKit.h> //创建文档类 @interface TinyPixDocument : UIDocumen ...

  7. Krypton Factor

    Krypton Factor Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  8. XML&nbsp; XmlDocument

    1.SelectSingleNode(xPath)  xPxth:xml/cam/type  一层一层递进

  9. Android 自学之列表视图ListView和ListActivity

    ListView是手机系统中使用非常广泛的一种组件,它以垂直列表的形式显示所有列表项. 创建ListView有两种方式: 直接使用ListView创建. 让Activity继承ListActivity ...

  10. Angular学习资源汇集

    网站 官网:www.angularjs.org 中文官网(社区):www.angularjs.cn 博客 流浪猫的窝 粉丝日记:AngularJS体验式编程系列文章 一介布衣 文档 GitCafe A ...