在使用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. Machine Learning - XI. Machine Learning System Design机器学习系统的设计(Week 6)

    http://blog.csdn.net/pipisorry/article/details/44119187 机器学习Machine Learning - Andrew NG courses学习笔记 ...

  2. 站点维护使用app_offline.htm页面提供友好的更新提示

    进行站点维护时为了以一个友好的方式提示给用户,比如什么“本网站正在更新”等等的信息可以建立一个叫app_offline.htm 的静态HTM页面文件,其中修改成你要临时显示的内容,将其放在你的应用的根 ...

  3. AJAX 表单提交 文件上传

    1. AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载 ...

  4. C++ Builder中splitter控件的使用方法简介

    C++ Builder提供了一个Splitter控件来实现对用户窗口的分割,只需拖动该控件到窗体上,就可以实现窗口的任意分割.把面板控件(Panel)拖动到窗体上,设置其对齐方式,然后把Splitte ...

  5. MSDN官方XmlSerializer类导致内存泄漏和性能低

    MSDN官方XmlSerializer类使用说明链接: http://msdn.microsoft.com/zh-CN/library/system.xml.serialization.xmlseri ...

  6. 一个ASP.NET Web API 2.0应用

    在一个空ASP.NET Web项目上创建一个ASP.NET Web API 2.0应用 由于ASP.NET Web API具有与ASP.NET MVC类似的编程方式,再加上目前市面上专门介绍ASP.N ...

  7. vijos1060 隔板法

    排列组合问题 之前没有学过隔板法,随便学习了一下 其实挺好理解的 附上题解: 先只考虑一种球:因为有n个盒子每个盒子可以放任意多球,还可以空出来任意多球.所以可以考虑为n+1个盒子,最后一个盒子里面是 ...

  8. 大数据时代,我们为什么使用hadoop

    大数据时代,我们为什么使用hadoop 我们先来看看大数据时代, 什么叫大数据,“大”,说的并不仅是数据的“多”!不能用数据到了多少TB ,多少PB 来说. 对于大数据,可以用四个词来表示:大量,多样 ...

  9. ibatis实战之基础环境搭建

    关于ibatis的介绍.优缺点,以及ibatis和hibernate的比较再此不在赘述,可参阅其他资料. 一.准备工作 1.下载ibatis软件包http://download.csdn.net/de ...

  10. 在Visual Studio 2012中使用VMSDK开发领域特定语言1

    在Visual Studio 2012中使用VMSDK开发领域特定语言(一)   前言 本专题主要介绍在Visual Studio 2012中使用Visualization & Modelin ...