最近在做项目的时候发现的一个问题,通过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. mysql数据库同步系统otter部署实践(中国与欧洲同步)

    otter的介绍就不说了, 自己去看官网https://github.com/alibaba/otter/wiki 本系统中, 中国的服务器部署在阿里云上, 欧洲服务器部署在亚马逊上, 由于阿里云的网 ...

  2. 朱晔的互联网架构实践心得S2E6:浅谈高并发架构设计的16招

    朱晔的互联网架构实践心得S2E6:浅谈高并发架构设计的16招 概览 标题中的高并发架构设计是指设计一套比较合适的架构来应对请求.并发量很大的系统,使系统的稳定性.响应时间符合预期并且能在极端的情况下自 ...

  3. UILabel实现自适应宽高需要注意的地方(二)

    需求图如下所示   UILabel "上期"   距离屏幕最左边 有35px UILabel "下期"   距离屏幕最右边 有35px 进行中文字在UIlabe ...

  4. 用java打印日历

    来自<java核心技术卷一> /** * Created by wangbin10 on 2019/1/3. * 打印当月日历 */ public class CalendarTest { ...

  5. 源码解读·RT-Thread多任务调度算法

    *本文依据RT-Thread当时最新版本4.0.1版本源码 RT-Thread操作系统是一款基于优先级和时间片轮转的多任务实时操作系统.其调度算法采用256个优先级,并支持相同优先级的任务存在.不同优 ...

  6. 大白话5分钟带你走进人工智能-第30节集成学习之Boosting方式和Adaboost

    目录 1.前述: 2.Bosting方式介绍: 3.Adaboost例子: 4.adaboost整体流程: 5.待解决问题: 6.解决第一个问题:如何获得不同的g(x): 6.1 我们看下权重与函数的 ...

  7. Netty源码分析-- 处理客户端接入请求(八)

    这一节我们来一起看下,一个客户端接入进来是什么情况.首先我们根据之前的分析,先启动服务端,然后打一个断点. 这个断点打在哪里呢?就是NioEventLoop上的select方法上. 然后我们启动一个客 ...

  8. [apue] dup2的正确打开方式

    管道与重定向常常需要使用dup与dup2复制句柄,其中dup2又较为常用,但是使用dup2有几个小坑需要注意. int dup2(int oldfd, int newfd); man手册页上是这样讲的 ...

  9. HBase Region重点剖析

    Region的概念 Region是HBase数据管理的基本单位.数据的move,数据的balance,数据的split,都是按照region来进行操作的. region中存储这用户的真实数据,而为了管 ...

  10. spark入门(二)RDD基础操作

    1 简述 spark中的RDD是一个分布式的元素集合. 在spark中,对数据的所有操作不外乎创建RDD,转化RDD以及调用RDD操作进行求值,而这些操作,spark会自动将RDD中的数据分发到集群上 ...