在使用jquery中动态新增的元素节点时会发现添加的事件是无法触发的,我们下面就为各位来详细的介绍此问题的解决办法.

  比如做一个ajax读取留言列表的时候,每条留言后面有个回复按钮,class为“reply”,如果你用的是$(".reply").click(function(){ //do something... }),想必后面通过ajax加载进来的列表中的回复按钮,点击事件会失效。

  其实最简单的方法就是直接在标签中写onclick="",但是这样写其实是有点low的,最好的方式还是通过给类名绑定一个click事件。

解决jquery中动态新增的元素节点无法触发事件的问题有两种解决方法,如下:

方法一:使用live

  live()函数会给被选的元素绑定上一个或者多个事件处理程序,并且规定当这些事件发生时运行的函数。通过live()函数适用于匹配选择器的当前及未来的元素。比如,通过脚本动态创建的元素。

实现如下:

$('.liLabel').live('click', function(){
alert('OK');
});

方法二:使用on

  可以通过on方法绑定事件,可以绑定到它的父级或者body中,实现如下:

$("#ulLabel").on('click','.liLabel',function(){
alert('OK')
});
或者:
$("body").on('click','.liLabel',function(){
alert('OK')
});

jquery中动态新增的元素节点无法触发事件解决办法的更多相关文章

  1. es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  2. Jquery中动态生成的元素没有点击事件或者只有一次点击事件

    今天用jq做动态生成的元素的click事件时,click只执行了一次,当然有些朋友可能根本没执行, 执行了一次的原因是因为可能有函数加载了一遍,一次都没执行的可能是没绑定对象或者jq版本问题, 动态生 ...

  3. append动态生成的元素,无法触发事件的原因及解决方案

    今天笔者在实现一个简单的动态生成元素功能的时候,发现了一个问题: 使用append动态生成的元素事件绑定失效了. 查阅资料后发现: click(fn)当选中的选择器被点击时触发回调函数fn.只针对与页 ...

  4. 锋利的jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件

    serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. <!DOCTYPE html> <html> <hea ...

  5. jquery中动态添加的标签绑定的click事件失效的解决办法

    把.click()换成.live('click',function(){})(如果你的jquery的版本是1.10之前) 把.click()换成.on('click',function(){})(jq ...

  6. jquery 中多个存在依赖关系的ajax调用解决办法

    在使用ajax异步调用的时候,可能碰到同时调用多个ajax这种情况.而且多个ajax之间还存在依赖关系.这种情况怎么处理呢?   有两种办法: 一种是多个ajax嵌套调用,这时需要设置async为fa ...

  7. Delphi 中 动态创建的Panel无法改变颜色的解决办法

    刚开始代码如下: procedure TForm1.Button1Click(Sender: TObject); var Panel: TPanel; begin Panel := TPanel.Cr ...

  8. Delphi中动态创建的Panel无法改变颜色的解决办法(要把Panel的ParentBackground设为False)

    刚开始代码如下: procedure TForm1.Button1Click(Sender: TObject); var Panel: TPanel; begin Panel := TPanel.Cr ...

  9. 解决jQuery ajax动态新增节点无法触发点击事件的问题

    在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="" ...

随机推荐

  1. Ubuntu12.04环境搭建遇到的问题和建议(一个)

    后的新公司需要在Ubuntu12.04在结构Android开发环境,在这个过程中,我们还是会遇到很多问题,这里记录.为了方便自己的未来,有人谁需要参考.从网络! 1. Q:在终端: sudo apt- ...

  2. Libgdx Box2D现实---这缓释微丸(两:Box2D介绍)

     Box2D官方网站 : http://box2d.org/ Box2D v2.1.0用户手冊翻译 : http://blog.csdn.net/complex_ok/article/catego ...

  3. jquery背景动画插件使用

    在网页制作动画特效的时候,有时候想通过背景插入图片,然后通过控制背景显示的位置来实现一些动画效果,这样就不用使用绝对定位控制left和top来实现动画效果!但是jquery本身的动画函数是不支持背景动 ...

  4. Android项目---快递查询

    快递查询,快递100上有更多接口信息 1.快递查询的接口是 快递公司的code值+快递单号 进行的网络查询.第一步,怎么将快递公司的名字转换成code值,传递给接口.下面是快递公司以及对应的code值 ...

  5. 一致性hash和虚拟节点

    consistent hashing 算法的原理 consistent hashing 是一种 hash 算法,简单的说,在移除 / 添加一个 cache 时,它能够尽可能小的改变已存在key 映射关 ...

  6. SVN版本冲突解决详解

    SVN版本冲突解决详解 分类: SVN(SubVersion)2009-11-23 15:45 27014人阅读 评论(12) 收藏 举报 svnsubversion服务器文档工作c 版本冲突原因: ...

  7. 理解的javascript自定义事件

    理解的javascript自定义事件 被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情, ...

  8. MongoDB学习(翻译5)

    C#驱动序列化文档对象 介绍 本文档基于C#官方驱动1.8版本. 本节C#驱动教程谈论C#类到BSON对象的序列化和反序列化.序列化是映射一个对象到可保存到MongoDB库中BSON对象的过程,反序列 ...

  9. Redis系统学习 二、数据结构

    一.字符串     1.在Redis里,字符串是最基本的数据结构.当你在思索着关键字-值对时,你就是在死锁着字符串数据结构.不要被名字给搞混了. 常见实例: set users:leto " ...

  10. NHibernate总结

    NHibernate总结 现在的项目中数据访问使用的是NHibernate的一个ORM框架,小弟也是在后期加入项目组,之前对NHibernate就一直没有接触过,所以一直在学习NHibernate,都 ...