js中 ajax动态新增节点无法触发点击事件
在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件。
其实最简单的方法就是直接在标签中写onclick="",但是这样写有些场景的是实现不了的,最好的方式还是通过给类名绑定一个click事件。
方法一:使用live:
live()
函数会给被选的元素绑定上一个或者多个事件处理程序,并且规定当这些事件发生时运行的函数。通过live()
函数适用于匹配选择器的当前及未来的元素。比如,通过脚本动态创建的元素。
代码示例:
$('.demo1').live('click', function(){
alert('OK');
});
方法二:使用on:
可以通过on
方法绑定事件,可以绑定到它的父级或者body中
代码示例:
$("#demo").on('click','.demol',function(){
alert('OK')
});
js中 ajax动态新增节点无法触发点击事件的更多相关文章
- 解决jQuery ajax动态新增节点无法触发点击事件的问题
在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="" ...
- 关于AJAX异步加载节点无法触发点击事件问题的解决方式
做练习的过程中遇到一个问题,使用AJAX异步新增一个节点,无法触发点击事件,经过查阅之后知道一个方式,使用JS的委托事件,在此做一个记录. $(document).on('click', '.recr ...
- js中怎么为同级元素添加点击事件
事件件是javascript脚本语言的重要组成部分,因为有事件才使用户页面的体验更加的美好.元素添加事件是js语言中最基础的.我们可以为元素本身添加事件,也可以通过事件绑定和事件监听为元素的父元素和子 ...
- angular JS中使用jquery datatable添加checkbox点击事件
'use strict'; app.controller('DataTableCtrl', function ($scope, $compile) { $scope.selected = []; $s ...
- js中ajax如何解决跨域请求
js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词 1.跨域请求 所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操 ...
- prototype.js 和 jQuery.js中 ajax 的使用
这次还是prototype.js 和 jQuery.js冲突的问题,前面说到过解决办法http://www.cnblogs.com/Joanna-Yan/p/4836252.html,以及上网说的大部 ...
- js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快、简单 post:安全,量大,不缓存)(服务器同步和异步区别:同步:等待服务器响应当中浏览器不能做别的事情)(ajax和jquery一起用的)
js中ajax连接服务器open函数的另外两个默认参数get请求和默认异步(open的post方式send函数带参数)(post请求和get请求区别:get:快.简单 post:安全,量大,不缓存)( ...
- vue中Enter触发登录事件和javascript中Enter触发点击事件
created(){ window.addEventListener('keydown', this.handleKeyDown, true)//开启监听键盘按下事件 } 在methods中当keyC ...
- JS实现按下按键触发点击事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- [Redis]Redis的设计与实现-链表/字典/跳跃表
redis的设计与实现:1.假如有一个用户关系模块,要实现一个共同关注功能,计算出两个用户关注了哪些相同的用户,本质上是计算两个用户关注集合的交集,如果使用关系数据库,需要对两个数据表执行join操作 ...
- SpringBoot 整合 apollo
简介 Apollo(阿波罗)是携程框架部门研发的分布式配置中心,能够集中化管理应用不同环境.不同集群的配置,配置修改后能够实时推送到应用端,并且具备规范的权限.流程治理等特性,适用于微服务配置管理场景 ...
- arcgis for js学习之Draw类
arcgis for js学习之Draw类 <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...
- 浅谈Semaphore类
Semaphore类有两个重要方法 1.semaphore.acquire(); 请求一个信号量,这时候信号量个数-1,当减少到0的时候,下一次acquire不会再执行,只有当执行一个release( ...
- 学习安卓开发[2] - 在Activity中托管Fragment
目录 在上一篇学习安卓开发[1]-程序结构.Activity生命周期及页面通信中,学习了Activity的一些基础应用,基于这些知识,可以构建一些简单的APP了,但这还远远不够,本节会学习如何使用Ac ...
- android viewpage预加载和懒加载问题
1.本人理解懒加载和预加载问题某种情况下可以归结为一类问题,下面我就说一下我遇到的预加载问题和懒加载问题及解决的相应方法: - [1 ] 预加载问题 描述:我用到了三个fragment. ...
- 什么是基于风险的测试(RBT)?
基于风险的测试(Risk-based testing) 文/杨学明 一.基于风险的测试起源 基于风险的测试起源,在软件测试领域,基于风险测试最早的是测试大师Boris Beizer<软件测试技术 ...
- Linux 中磁盘容量配额
linux的设计之处就是为了多用户同时执行不同的任务,但是硬件资源是有限的,不能让一个用户无限制的上传文件,如果不加以限制,那么磁盘最终将会被充满,对此我们应该使用uquota来加以限制. 1.quo ...
- C# List集合去重使用lambda表达式
name age sex Lucy 22 woman Lily 23 woman Tom 24 man Lucy 22 woman Lily 23 woman LiLei 25 man List< ...
- 浅谈TCP IP协议栈(二)IP地址
上一节大致了解TCP/IP协议栈是个啥东西,依旧是雾里看花的状态,有很多时候学一门新知识时,开头总是很急躁,无从下手,刚学会一点儿,却发现连点皮毛都不算,成就感太低,所以任何时候学习最重要的是要在合适 ...