在使用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. Plugin For KanColleViewer – Provissy Tools V1.0

    これはKanColleViewerためのプラグインです,KanColleViewerの機能を拡張する. #介绍 / Introduction / 紹介这是一个KanColleViewer(俗称”提督很 ...

  2. [翻译]初识SQL Server 2005 Reporting Services Part 3

    原文:[翻译]初识SQL Server 2005 Reporting Services Part 3 这是关于SSRS文章中四部分的第三部分.Part 1提供了一个创建基本报表的递阶教程.Part 2 ...

  3. spring bean范围

    总结: 实例代码具体解释: 文件夹结构 Car.java package com.coslay.beans.autowire; public class Car { private String br ...

  4. 架构师Jack专访:全面认识软件测试架构师

    ◇ 测试架构师的职责 测试的职业通道基本是管理线和技术线两条路. 管理线主要的职责:更多是项目管理和资源管理. 技术线主要的职责:更多是技术管理和业务知识. 软件测试架构师更多就是技术线的带头人.管理 ...

  5. Ubuntu(Linux) + mono + jexus +asp.net MVC3

    Ubuntu(Linux) + mono + jexus +asp.net MVC3 部署 感谢  张善友 的建议,我把 微信订餐  由nginx 改成 jexus,目前运行状况来说,确实稳定了很多, ...

  6. C#继承关系中【方发表】的创建和调用

    —C#继承关系中[方发表]的创建和调用 Insus.NET实现一个最炫最原创的验证码.你可以从下面的一步一步的演译. 实现一个验证码,需要了解的是,它最基本是随机产生字符串:<在ASP.NET ...

  7. Enterprise Architect UML 建模之活动图

    EA(Enterprise Architect) UML 建模之活动图   一.活动图的概念作用 活动图本质上是一种流程图,它描述活动的序列,即系统从一个活动到另一个活动的控制流. 活动图的作用:描述 ...

  8. 浅谈DevExpress<五>:TreeList简单的美化——自定义单元格,加注释以及行序号

    今天就以昨天的列表为例,实现以下效果:预算大于110万的单元格突出显示,加上行序号以及注释,如下图:

  9. Salt状态管理

    Salt状态管理   前言 上一篇文章概括性的介绍了Salt的用途和它的基本组成和实现原理,也深入的的介绍了Salt的命令编排和批量执行,但是对于状态管理只是简单的介绍了一下,因为状态管理是一个比较重 ...

  10. 一个人开发的html整站源码分享网站就这么上线了

    项目我采用了纯静态html+动态搜索的模式,就是说详情页.主页等纯静态页面,仅搜索页面采用数据库访问搜索,搜索结果分为静态和动态,如果输入的关键字是已存在的标签就静态展示,否则就动态展示,这么做的好处 ...