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

解决方案：

通过Google，我发现在jquery1.7版本之前通常使用 .live() 这个事件，但是这个方法在1.9版本被移除了

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

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

第一点：.on()事件绑定的元素必须是页面中已经存在的，也就是静态html中存在的元素，才会被绑定。

第二点：通过selector参数进行代理，什么意思呢？就是说当这个参数不为空的时候，.on()绑定的事件不会直接在绑定的元素上触发，它会自动匹配内部节点，然后在该节点触发

怎么理解第二点呢？通俗点说就是：一个父亲(已绑定静态页面的元素)管着一大堆儿子(动态加载出来的元素)，我们首先找到了父亲，然后告诉他其中一个儿子的名字和要干的事情(具体绑定的事件)，然后他就会去让你指定的这个儿子去干。这样好理解吧。

到这里，问题就解决了。具体写法像这样：

以上是我解决该问题的整个过程，希望能够帮助到你，共同进步！！！

本文参考文档：

https://www.jquery123.com/

jquery:为动态加载的元素绑定事件的更多相关文章

  1. jquery:为动态加载的元素添加点击事件

    jquery:为动态加载的元素添加点击事件 最近在做项目的时候遇到了这样一个问题,给用ajax动态加载出来的内容添加点击事件,但是怎么都触发不了,经过查询试验总结出正确的写法 在jquery1.7之前 ...

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

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

  3. jquery给动态添加的dom元素绑定事件

    $('input').click(function () { //处理代码 }); 这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定,对于页面中动态添加的元素,在页面加载完成后 ...

  4. jQuery给动态添加生成的元素绑定事件的方法

    <div id="testdiv">   <ul></ul> </div> 需要给<ul>里面动态添加的<li&g ...

  5. Jquery为动态添加的未来元素绑定事件

    语法: $(selector).on(event,childSelector,data,function) event:必需.规定要从被选元素移除的一个或多个事件或命名空间.由空格分隔多个事件值,也可 ...

  6. jquery 等html加载完成再绑定事件

    $(document).on("click","selector",function(){ //code});

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

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

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

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

  9. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

随机推荐

  1. jquery选择器集锦

    一,基本选择器: 1 2 3 4 $("#txtName");   $("#txt\\#b");//获取id为 txt#b的元素,\\为转义符 $(" ...

  2. C#基础原理拾遗——引用类型的值传递和引用传递

    以前写博客不深动,只搭个架子,像做笔记,没有自己的思考,也没什么人来看.这个毛病得改,就从这一篇开始- 最近准备面试,深感基础之重要,奈何我不是计算机科班出身,基础方面有些捉襟见肘.短期怎么补?做面实 ...

  3. echarts 中国地图标注所在点

    达到的效果: 1.本身是个中国地图‘ 2.直接通过经纬度标注 3.标注点可以是其他样子(比如:五角星) 4.标注点具有提示框并且鼠标可以进入 5.提示框里的链接可点击(可以添加为链接事件): 所需要技 ...

  4. 快速理解类的访问控制(public,protected,private)

    接触过面向对象编程的朋友们都知道类中的访问控制符无非有三个,public, protected, private. 理解他就先从期望他达到的效果先说吧 Public: 使成员对于整个程序内(类内类外) ...

  5. vscode解决同步设置插件连接不上git

    vscode有一款比较好用的插件,就是设置同步.可以在一台电脑上同步另一台电脑的所有配置及插件! Settings Sync 但是在公司电脑有个奇葩问题,就是连接不上git. 解决:配置代理 &quo ...

  6. JAVA复习笔记03（完）

    31.类中可定义接口 一个定义接口的java文件中最多有1个Public的接口 32.TreeMap 按照键值升序排序 LinkedHashMap 按照插入顺序排序 Map的操作: Map<in ...

  7. if语句简单练习

    input练习 # -*-coding:utf-8 -*- # import getpass 隐藏只能在cmd中使用 user=input("请输入账号:") password=i ...

  8. 向Rocket.Chat推送消息

    Rocket.Chat推送消息 Rocket.Chat是一个开源实时通讯平台, 支持Windows, Mac OS, Linux. 支持聊天, 文件上传, 视频通话, 语音通话功能. 向Rocket. ...

  9. 18 | 眼前一亮：带你玩转GUI自动化的测试报告

  10. 微服务SpringCloud之服务调用与负载均衡

    上一篇我们学习了服务的注册与发现,本篇博客是在上一篇的基础上学习服务的调用.上一博客主要创建了Eureka的服务端和一个Client,该Client包含了一个Controller用来提供对外服务供外部 ...