jquery:为动态加载的元素添加点击事件
jquery:为动态加载的元素添加点击事件
最近在做项目的时候遇到了这样一个问题,给用ajax动态加载出来的内容添加点击事件,但是怎么都触发不了,经过查询试验总结出正确的写法
在jquery1.7之前的版本中用的是live()方法,但是live()方法在1.7中已经不建议使用,1.9中删除了这个方法
live()方法适用于匹配选择器的当前及未来的元素(例如有脚本创建的新元素)
重点是自jquery1.7版本起,on()方法是bind()、live()、delegate()方法的新的替代品
on()方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)
$("#mainbody").on("click",".link",function(){
});
on前面的这个#mainbody一定要是html中存在的,静态的,否则点击事件触发不了
".link"是动态加载出来的内容,它的class=".link"
on方法在什么条件下都是成立的
用jquery:为动态加载的元素添加点击事件其实也可以用
$(".link").click(function(){
});
只不过是有限制的,这个点击事件要和动态加载的内容在同一作用域中才行
jquery:为动态加载的元素添加点击事件的更多相关文章
- javascript/jquery给动态加载的元素添加click事件
/** 这种写法:在重新加载数据后事件依然有效*/$(document).on('click', '#district_layer ul li', function () { });
- jquery:为动态加载的元素绑定事件
最近在做项目的时候发现的一个问题,通过ajax动态加载出来的一个button值绑定不了点击事件.我使用的是datatables这款表单插件,表单内容是通过ajax动态渲染出来的. 解决方案: 通过Go ...
- JQuery的动态加载class无法实现点击时间的解决方案
//对于 加载过来class 的del_a 实现点击事情 $(document).on('click',".del_a",function(){ $(".mark_id& ...
- 移动端,ajax 动态加载的元素,为动态添加的一系列同个类名的元素添加点击事件
背景:一个列表页,有一系列同类名的元素,需要为每一个动态添加的列表项添加事件: 点击选择下图中不同的文档类型,再通过 ajax 动态加载不同的文档. 使用过的方法: 1.通知 jquery 的 $(s ...
- Javascript动态加载Html元素到页面Dom文档结构时执行顺序的不同
我们有时会通过ajax动态获取一段Html代码,并且将这段代码通过javascript放到页面的Dom结构中去. 而很多时候通过ajax动态获取的Html代码中也包含javascript代码,有一点需 ...
- jquery无法为动态生成的元素添加点击事件的解决方法
遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <d ...
- jQuery EasyUI-DataGrid动态加载表头
项目总结—jQuery EasyUI-DataGrid动态加载表头 目录(?)[-] 概要 实现 总结 概要 在前面两篇文章中,我们已经介绍了在jQuery EasyUI-DataGrid ...
- JQuery 动态加载 HTML 元素时绑定点击事件无效问题
问题描述 假设项目中有一个列表页面,如下: 当点击列表一行数据可以显示详情页面,而详情页面的数据是根据当前行的数据作为参数,通过 ajax 请求到后台返回的数据,再根据返回的结果动态生成 html 页 ...
- js动态加载HTML元素时出现的无效的点击事件
项目中列表数据中隐藏着详情数据, 图一: 详情数据是:根据当前行的数据作为参数,通过ajax请求到后台返回的数据,再根据返回的结果动态生成HTML页面 图二: js文件中的这些js的点击事件无效: j ...
随机推荐
- 开发组件:tmpfs
[Linux]tmpfs简介及增加方式 https://blog.csdn.net/nextaction/article/details/57076924
- Selenium如何定位动态id的元素?
怎么定位这类型的元素呢? 根据其他属性定位如果有其他固定属性,最先考虑的当然是根据元素的其他属性来定位,定位方式那么多,何必在这一棵树上吊死.. 根据相对关系定位根据其附近的父节点.子节点.兄弟节点定 ...
- OpenACC 异步计算
▶ 按照书上的例子,使用 async 导语实现主机与设备端的异步计算 ● 代码,非异步的代码只要将其中的 async 以及第 29 行删除即可 #include <stdio.h> #in ...
- elk6.22
启动错误: 参考网站:https://blog.csdn.net/feinifi/article/details/73633235?utm_source=itdadao&utm_medium= ...
- springboot1.X 到2.X 的改变
参考:https://blog.csdn.net/tzs_1041218129/article/details/79514845
- eclipse xml 编码问题 “3 字节的 UTF-8 序列的字节 3 无效”
原本项目没问题,git commit之后,突然报错 “3 字节的 UTF-8 序列的字节 3 无效” 尝试过改xml文件编码等,没成功.pom中设置属性,成功解决 <project.build. ...
- 使用seaborn制图(柱状图)
import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns # 设置风格, ...
- TTreeView.OnCustomDrawItem
TTreeNode *node; node = , "AAAA"); TreeView1->Items->AddChild(node, "aaa1" ...
- MySQLNonTransientConnectionException: No operations allowed after connection closed
原因分析 查看了Mysql的文档,以及Connector/J的文档以及在线说明发现,出现这种异常的原因是: Mysql服务器默认的"wait_timeout"是8小时,也就是说一个 ...
- 字符串(string) 的基本操作
name = "my \tname is alex" #\t 空格 1. name.capitalize() #首字母大写 2.name.count('a') # 对字母a计数 ...