jquery:为动态加载的元素绑定事件
最近在做项目的时候发现的一个问题,通过ajax动态加载出来的一个button值绑定不了点击事件。我使用的是datatables这款表单插件,表单内容是通过ajax动态渲染出来的。
解决方案:
通过Google,我发现在jquery1.7版本之前通常使用 .live() 这个事件,但是这个方法在1.9版本被移除了

所以,我们需要找一个替代的方法 .on(),首先让我们先来看下这个事件的介绍

看介绍,这两个事件做的事情差不多,然后我在具体的介绍中发现了这个

第一点:.on()事件绑定的元素必须是页面中已经存在的,也就是静态html中存在的元素,才会被绑定。
第二点:通过selector参数进行代理,什么意思呢?就是说当这个参数不为空的时候,.on()绑定的事件不会直接在绑定的元素上触发,它会自动匹配内部节点,然后在该节点触发
怎么理解第二点呢?通俗点说就是:一个父亲(已绑定静态页面的元素)管着一大堆儿子(动态加载出来的元素),我们首先找到了父亲,然后告诉他其中一个儿子的名字和要干的事情(具体绑定的事件),然后他就会去让你指定的这个儿子去干。这样好理解吧。
到这里,问题就解决了。具体写法像这样:

以上是我解决该问题的整个过程,希望能够帮助到你,共同进步!!!
本文参考文档:
jquery:为动态加载的元素绑定事件的更多相关文章
- jquery:为动态加载的元素添加点击事件
jquery:为动态加载的元素添加点击事件 最近在做项目的时候遇到了这样一个问题,给用ajax动态加载出来的内容添加点击事件,但是怎么都触发不了,经过查询试验总结出正确的写法 在jquery1.7之前 ...
- javascript/jquery给动态加载的元素添加click事件
/** 这种写法:在重新加载数据后事件依然有效*/$(document).on('click', '#district_layer ul li', function () { });
- jquery给动态添加的dom元素绑定事件
$('input').click(function () { //处理代码 }); 这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定,对于页面中动态添加的元素,在页面加载完成后 ...
- jQuery给动态添加生成的元素绑定事件的方法
<div id="testdiv"> <ul></ul> </div> 需要给<ul>里面动态添加的<li&g ...
- Jquery为动态添加的未来元素绑定事件
语法: $(selector).on(event,childSelector,data,function) event:必需.规定要从被选元素移除的一个或多个事件或命名空间.由空格分隔多个事件值,也可 ...
- jquery 等html加载完成再绑定事件
$(document).on("click","selector",function(){ //code});
- Javascript动态加载Html元素到页面Dom文档结构时执行顺序的不同
我们有时会通过ajax动态获取一段Html代码,并且将这段代码通过javascript放到页面的Dom结构中去. 而很多时候通过ajax动态获取的Html代码中也包含javascript代码,有一点需 ...
- jQuery EasyUI-DataGrid动态加载表头
项目总结—jQuery EasyUI-DataGrid动态加载表头 目录(?)[-] 概要 实现 总结 概要 在前面两篇文章中,我们已经介绍了在jQuery EasyUI-DataGrid ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
随机推荐
- wpf中的datagrid绑定操作按钮是否显示或者隐藏
如图,需要在wpf中的datagrid的操作那列有个确认按钮,然后在某些条件下确认按钮可见,某些情况下不可见的,放在mvc里直接在cshtml页面中if..else就行了. 但是在wpf里不行..网上 ...
- spring boot 2.x 系列 —— actuator 服务监控与管理
文章目录 一.概念综述 1.1 端点 1.2 启用端点 1.3 暴露端点 1.4 健康检查信息 二.项目说明 1.1 项目结构说明 1.2 主要依赖 1.3 项目配置 1.4 查看监控状态 三.自定义 ...
- 阿里云ssl证书NGINX配置https,wss
server { listen 443; server_name server.sentiger.com; ssl on; root /home/wwwroot/Service/beta/public ...
- Mysql索引优化之索引的分类
Mysql的历史 简单回顾一下Mysql的历史,Mysql 是一个关系型数据库管理系统,由瑞典 Mysql AB 公司开发,目前属于 Oracle 公司.关系型数据库将数据保存在不同的表中,而不是将 ...
- Springboot 连接 使用 Redis Example
通过一个简单的例子使用Springboot 连接并使用Redis. 本文假设已经安装好Redis. 1.首先将URL转换为一个ID ,并使用 StringRedisTemplate 将ID 和 URL ...
- Spring Boot2(六):使用Spring Boot整合AOP面向切面编程
一.前言 众所周知,spring最核心的两个功能是aop和ioc,即面向切面和控制反转.本文会讲一讲SpringBoot如何使用AOP实现面向切面的过程原理. 二.何为aop aop全称Aspec ...
- 搭建本地pip源
搭建本地的pip源 开发环境部署机器的时候, 每次从网上下载pip包会很慢, 将需要的包和相关依赖下载到本地, 搭建一个本地源服务器. 基本都是安装多个包, 推荐使用文件的方式, 文件内容格式, 可以 ...
- 在django中使用vue.js需要注意的地方
有接口如下: http://127.0.0.1:8000/info/schemes/ 返回json数据: [ { "name": "(山上双人标准间)黄山经典二日游(魅力 ...
- 在CentOS7下安装JDK1.8
1.下载JDK1.8的tar.gz的压缩包 下载网址:https://www.oracle.com/technetwork/java/javase/downloads/java-archive-jav ...
- HDU 3938:Portal(并查集+离线处理)
http://acm.hdu.edu.cn/showproblem.php?pid=3938 Portal Problem Description ZLGG found a magic theor ...