写网页的时候常常需要根据实际情况添加新的元素,然后这些新元素还需要绑定已有的事件,如:有一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 PhoneGap源码分析——白名单

    对于单独的Web app应用来说,加载进来的url一般不能保证它的安全性.那么如何来处理url安全性的问题呢. 让我们来看看PhoneGap是如何做的. PhoneGap采用了白名单的形式,认为在白名 ...

  2. 配置Log4j(非常具体)

    来自: http://www.blogjava.net/zJun/archive/2006/06/28/55511.html Log4J的配置文件(Configuration File)就是用来设置记 ...

  3. javascript面向对象学习笔记——创建对象(转)

    工厂模式 该模值抽象了创建具体对象de过程.用函数来封装噫特定接口创建对象的细节. function createPerson(name,age,job){ var o=new Object(); o ...

  4. C# Tcp协议收发数据

    运行这个程序前需要先关闭Windows防火墙,Win7系统关闭防火墙的方法是在控制面板的“控制面板\系统和安全\Windows 防火墙\自定义设置”路径中,将“家庭或工作(专用)网络位置设置”和“公用 ...

  5. Jordan Lecture Note-1: Introduction

    Jordan Lecture Note-1: Introduction 第一部分要整理的是Jordan的讲义,这份讲义是我刚进实验室时我们老师给我的第一个任务,要求我把讲义上的知识扩充出去,然后每周都 ...

  6. 关于Service常驻内存不被清理的解决方法.

    众所周知, Service是跑后台的. 但是有些Rom厂商把一键清理做的真是太好用了, 以至于一键清理变成了一种习惯, Service已经变的不再是Service了. 那为什么像诸如360, 微信, ...

  7. RTB实时竞价广告是未来趋势

    原文:http://www.inboundjournals.com/rtb-real-time-bidding-the-future-of-online-advertising/ [资讯图表] RTB ...

  8. Linux内核加载全流程

    无论是Linux还是Windows,在加电后的第一步都是先运行BIOS(Basic Input/Output System)程序——不知道是不是所以的电脑系统都是如此.BIOS保存在主板上的一个non ...

  9. 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 ...

  10. 在openshift上使用django+postgresql

    openshift上用的是django 1.7,数据库选择的是postgresql 9.2 本地开发用的是sqlite3数据库,发布到openshift上后是没有数据的(本地的sqlite3数据库里的 ...