在jQuery当中append是动态向页面中添加元素的常见方法,但是很多时候append添加之后的节点再次绑定事件(比如click)的时候,就会发现click失效,这时候就会涉及到,on()

高版本的jQuery中.on()启用之后bind和live都已经失效。

  再说上面的问题,如$(".DIV").append("<li>123</li>"),这时候用$(".DIV").click()方法绑定就会发现click事件没有绑定上,解决 的办法,$(".DIV").on("click","li",function(){})

  注意:on里面的节点是你append添加里面的最高父节点开始算 比如 $(".DIV").append("<li>123<a> 确定</a> </li>"),这时候使用$(".DIV li").on("click","a",function(){})依然是不起做用的,必须把最高父节点放在on的第二个属性点里面,正确方法$(".DIV").on("click","li a",function(){})

append 添加的元素重新绑定事件的更多相关文章

  1. js动态添加的元素不能绑定事件

    动态生成的元素,使用.on绑定事件,比如$(document).on("click",".divclick",function(){})

  2. jq动态添加的元素触发绑定事件无效

    <div class='a'> <div class='b'> </div> 其中$('.a')是html页面的元素,$('.b')是jq动态添加的元素.$(&qu ...

  3. 【jquery】 在异步加载的元素上绑定事件

    最近因为工作关系又重新回归到了jquery的怀抱,发现很多jquery的一些细节处理的部分都忘记了.这里记录一下最近在做项目时频繁遇到的一个问题:给异步加载的元素添加事件绑定. 问题发生的前提是项目前 ...

  4. jquery 动态创建的元素,绑定事件无效之解决方法

    今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...

  5. jq append添加的元素click获取不到的解决方法

    移动端手机ios网页,apppend添加html class名用 on()方法没效果 解决方案:在html里面给需要点击的元素加一个onclick="javascript:void(0)&q ...

  6. 解决jquery新加入的元素没有绑定事件问题

    在使用jquery操作时,往往需要动态的添加一些元素,但是这些新加入的元素并没有像css那样被赋予原本定义的样式,解决方法如下: 1.动态插入元素后,并用bind事件给新加入的元素绑定事件. 2.如果 ...

  7. (Jquery)关于给动态加载的页面元素,绑定事件

    如果使用Jquery给元素绑定事件,一般会用bind,或者类似click函数来直接绑定. 但是对于动态生成的元素,会发现常规绑定无法生效,比如: <div class'div'></ ...

  8. jQuery1.9及其以上版本中动态元素on绑定事件无效解决方案

    jQuery 1.9/2.0/2.1及其以上版本无法使用live函数了,然而jQuery 1.9及其以上版本提供了on函数来代替.本文讲解了jQuery on函数的使用方法,以及在使用jQuery函数 ...

  9. jquery在ajax新加入的元素后绑定事件click

    使用YII在做一个点击小图.能够在弹出窗体中显示大图的功能的时候,发现.GridView首页面的列表项按点击时一切正常,但按下了下一页后. 再点击小图,就不起作用了.原来,这是GridView使用了a ...

随机推荐

  1. 获取文件mime类型

    检测文件类型 finfo_file (PHP >= 5.3.0, PECL fileinfo >= 0.1.0) 修改php.ini,将extension=php_fileinfo.dll ...

  2. $.post 跨域传输数据

    使用的是TP框架 前端代码: <!DOCTYPE html><html> <head> <title>这里是前端代码</title> < ...

  3. maven项目project facets中是2.3调整为3.0的解决办法

    以前情况下直接直接调整到3.0下面的按钮就会变成不可以点,当把前面的勾取掉就可以点击apply了,之后再次把勾勾上,点击apply有个弹窗默认是webcontent.在maven项目中改成src/ma ...

  4. mui 下拉刷新

    mui 下拉刷新 此文提供的是mui这种下拉刷新.悬浮于页面上,比较好用. <!DOCTYPE html> <html> <head> <meta chars ...

  5. Ubuntu下deb文件及tgz文件安装

    dpkg 是Debian Package的简写,是为Debian 专门开发的套件管理系统,方便软件的安装.更新及移除.所有源自Debian的Linux发行版都使用dpkg,例如Ubuntu.Knopp ...

  6. 【web开发 | 移动APP开发】 Web 移动开发指南(2017.01.05更新)

    版本记录 - 版本1.0 创建文章(2016.12.30) - 版本1.1 更正了hybird相关知识:增加了参考文章(2017.01.05): + Web APP更正为响应式移动站点与页面,简称响应 ...

  7. bzoj 2141: 排队

    2141: 排队 Time Limit: 4 Sec Memory Limit: 259 MB Description 排排坐,吃果果,生果甜嗦嗦,大家笑呵呵.你一个,我一个,大的分给你,小的留给我, ...

  8. Généralement c'est un mélange qui me devient personnellement

    Parmi mes plus grands problèmes personnels avec maisons de rue conventionnelles est en fait ils sont ...

  9. [DUBBO]Dubbo控制台查看方法

    1.dubbo控制台安装方法网上较多,例如转载http://dtbuluo.com/blog/archives/37 2.dubbo控制台查看 由于我们组是开发安装的dubbo.zookeeper等等 ...

  10. mysql复习相关

    Mysql相关 mysql增删改查 我们需要修改数据表名或者修改数据表字段时,就需要使用到Mysql Alter命令 删除,添加或修改表字段 alter table student drop regi ...