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:为动态加载的元素添加点击事件的更多相关文章

  1. javascript/jquery给动态加载的元素添加click事件

    /** 这种写法:在重新加载数据后事件依然有效*/$(document).on('click', '#district_layer ul li', function () { });

  2. jquery:为动态加载的元素绑定事件

    最近在做项目的时候发现的一个问题,通过ajax动态加载出来的一个button值绑定不了点击事件.我使用的是datatables这款表单插件,表单内容是通过ajax动态渲染出来的. 解决方案: 通过Go ...

  3. JQuery的动态加载class无法实现点击时间的解决方案

    //对于 加载过来class 的del_a 实现点击事情 $(document).on('click',".del_a",function(){ $(".mark_id& ...

  4. 移动端,ajax 动态加载的元素,为动态添加的一系列同个类名的元素添加点击事件

    背景:一个列表页,有一系列同类名的元素,需要为每一个动态添加的列表项添加事件: 点击选择下图中不同的文档类型,再通过 ajax 动态加载不同的文档. 使用过的方法: 1.通知 jquery 的 $(s ...

  5. Javascript动态加载Html元素到页面Dom文档结构时执行顺序的不同

    我们有时会通过ajax动态获取一段Html代码,并且将这段代码通过javascript放到页面的Dom结构中去. 而很多时候通过ajax动态获取的Html代码中也包含javascript代码,有一点需 ...

  6. jquery无法为动态生成的元素添加点击事件的解决方法

    遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <d ...

  7. jQuery EasyUI-DataGrid动态加载表头

    项目总结—jQuery EasyUI-DataGrid动态加载表头     目录(?)[-] 概要 实现 总结   概要 在前面两篇文章中,我们已经介绍了在jQuery EasyUI-DataGrid ...

  8. JQuery 动态加载 HTML 元素时绑定点击事件无效问题

    问题描述 假设项目中有一个列表页面,如下: 当点击列表一行数据可以显示详情页面,而详情页面的数据是根据当前行的数据作为参数,通过 ajax 请求到后台返回的数据,再根据返回的结果动态生成 html 页 ...

  9. js动态加载HTML元素时出现的无效的点击事件

    项目中列表数据中隐藏着详情数据, 图一: 详情数据是:根据当前行的数据作为参数,通过ajax请求到后台返回的数据,再根据返回的结果动态生成HTML页面 图二: js文件中的这些js的点击事件无效: j ...

随机推荐

  1. final修饰的类有什么特点

    变量定义为final,一旦被初始化便不可改变,这里不可改变的意思对基本类型来说是其值不可变,而对于对象变量来说其引用不可再变. 方法定义为final,是为了防止任何继承类改变它. 类定义为final, ...

  2. python之路05

    一  元组 对于元组我们可以把他看成一个不可变的列表# 元组:在()内用逗号分隔开的能够存多个值,对于元组来说列表有的一些功能它基本上都有,# 1.按索引取值(正向取+反向取):只能取# 2.切片(顾 ...

  3. 经典算法 BFPRT算法详解

    内容: 1.原始问题     =>  O(N*logN) 2.BFPRT算法    => O(N) 1.原始问题 问题描述:给你一个整型数组,返回其中第K小的数 普通解法: 这道题可以利用 ...

  4. 基于Redis位图实现用户签到功能

    场景需求 适用场景如签到送积分.签到领取奖励等,大致需求如下: 签到1天送1积分,连续签到2天送2积分,3天送3积分,3天以上均送3积分等. 如果连续签到中断,则重置计数,每月初重置计数. 当月签到满 ...

  5. HTML5 位运算符

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. MySQL命令行学习

    1.登录mysql 本地:mysql -u root -p, 回车后输入密码; 也可以p后不加空格,直接加密码.回车就登录了 远程:mysql -hxx.xx.xx.xx -u -pxxx 2.查看数 ...

  7. 7 python 模块间相互导入

    python在不同层级目录import模块的方法 注意,在python3里,即使目录下没__int__.py文件也能创建成功,猜应该是解释器优化所致,但创建包还是要记得加上这个文件 吧. 1.模块的分 ...

  8. HIBERNATE知识复习记录3-关联关系

    先上一张图,关于几种关系映射: 抄一段解释: 基本映射是对一个实体进行映射,关联映射就是处理多个实体之间的关系,将关联关系映射到数据库中,所谓的关联关系在对象模型中有一个或多个引用.关联关系分为上述七 ...

  9. Haskell语言学习笔记(34)System.Environment

    System.Environment getArgs :: IO [String] getProgName :: IO String getExecutablePath :: IO FilePath ...

  10. Spring 集成Hibernate的三种方式

    首先把hibernate的配置文件hibernate.cfg.xml放入spring的src目录下,并且为了便于测试导入了一个实体类Student.java以及它的Student.hbm.xml文件 ...