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中动态新增的元素节点无法触发事件解决办法的更多相关文章
- es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
- Jquery中动态生成的元素没有点击事件或者只有一次点击事件
今天用jq做动态生成的元素的click事件时,click只执行了一次,当然有些朋友可能根本没执行, 执行了一次的原因是因为可能有函数加载了一遍,一次都没执行的可能是没绑定对象或者jq版本问题, 动态生 ...
- append动态生成的元素,无法触发事件的原因及解决方案
今天笔者在实现一个简单的动态生成元素功能的时候,发现了一个问题: 使用append动态生成的元素事件绑定失效了. 查阅资料后发现: click(fn)当选中的选择器被点击时触发回调函数fn.只针对与页 ...
- 锋利的jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件
serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. <!DOCTYPE html> <html> <hea ...
- jquery中动态添加的标签绑定的click事件失效的解决办法
把.click()换成.live('click',function(){})(如果你的jquery的版本是1.10之前) 把.click()换成.on('click',function(){})(jq ...
- jquery 中多个存在依赖关系的ajax调用解决办法
在使用ajax异步调用的时候,可能碰到同时调用多个ajax这种情况.而且多个ajax之间还存在依赖关系.这种情况怎么处理呢? 有两种办法: 一种是多个ajax嵌套调用,这时需要设置async为fa ...
- Delphi 中 动态创建的Panel无法改变颜色的解决办法
刚开始代码如下: procedure TForm1.Button1Click(Sender: TObject); var Panel: TPanel; begin Panel := TPanel.Cr ...
- Delphi中动态创建的Panel无法改变颜色的解决办法(要把Panel的ParentBackground设为False)
刚开始代码如下: procedure TForm1.Button1Click(Sender: TObject); var Panel: TPanel; begin Panel := TPanel.Cr ...
- 解决jQuery ajax动态新增节点无法触发点击事件的问题
在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="" ...
随机推荐
- C++中怎样获取类成员的指针
我们都知道C++ class中有三种成员函数,static(静态的),nonstatic(非静态的),virtual(虚拟的)各种成员函数的指针各有差别,下面是一个完整的样例:(注意红颜色的差别 ...
- 制作iis自动安装包
原文:制作iis自动安装包 MS 一直没有提供可独立安装的 IIS 安装包,Windows 的缺省安装没有安装它,通常要到控制面板的"添加/删除 Windows 程序"中去选择安装 ...
- Linux Shell脚本入门--awk命令详解
简单使用: awk :对于文件中一行行的独处来执行操作 . awk -F :'{print $1,$4}' :使用‘:’来分割这一行,把这一行的第一第四个域打印出来 . 详细介绍: AWK命令介绍 ...
- 转: js快速分享代码
这是一款简单易用的文章分享工具,您只需将下面的html代码拷贝到模板中就可以实现文章快速分享功能.如果您想分享你的博客.个人网站或者企业网站等等,下面是两款不错的分享工具,值得拥有! 1. [html ...
- jQuery 1.9 移除了 $.browser 的替代方法
jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support . 在更新的 2.0 版本中,将不再支持 IE 6/7/8. ...
- setTimeout与setInterval的区别
setTimeout与setInterval的区别:1.setTimeout设置后隔指定时间后只会执行一次2.setInterval设置后会每隔指定时间执行一次3.setTimeout一般在方法内部使 ...
- (蓝牙)网络编程中,使用InputStream read方法读取数据阻塞的解决方法
问题如题,这个问题困扰了我好几天,今天终于解决了,感谢[1]. 首先,我要做的是android手机和电脑进行蓝牙通信,android发一句话,电脑端程序至少就要做到接受到那句话.android端发送信 ...
- MVC Sesion丢失问题
花了两个小时的时间处理一个Session 取值问题 使用MVC LoadCheckController(登录校验)登录成功后创建一个Session,Session中封装了用户的相关信息如权限基本信息, ...
- 浅谈DevExpress<四>:TreeList中的拖拽功能
本篇要实现的目标,简单来说就是把一个treelist的节点用鼠标拖到另外的节点(自身或其他的listview)上,如下图: 1
- Push Notification总结系列(一)
Notification系列概括: 1.Push Notification简介和证书说明及生成配置 2.Push Notification的iOS处理代码和Provider详解 3.Push Noti ...