最近在做项目的时候发现的一个问题，通过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. 浅谈stylus与sass的对比

    all we konw , 这两个都是css的预编译工具,但虽然都是编译工具,但还是存在差别的,下面来讲讲其中的区别 1.变量 sass定义变量是以这种形式进行定义的$xxx:10;而stylus的定 ...

  2. notepadd++正则表达式大小写转换

    示例1:将语句 test this sentence 转为大写 查找:^.*$ 替换:\U$0 或------------ 查找:^(.*)$ 替换:\U\1 或 \U$1 示例2:将语句 TEST ...

  3. vc++的学习目的

    vc++支持多种编程方式,从结构化的编程,面向对象编程,泛型编程,com组件编程. 我想学习vc++的原因是它更接近底层.非常的高效,希望之后用它写出非常简洁高效的代码.

  4. 《Effective Java》-——用私有构造器或者枚举类型强化Singleton属性

    Singleton指仅仅被实例化一次的类.Singleton通常被用来代表那些本质上唯一的系统组件,比如窗口管理器或者文件系统.使类成为Singleton会使它的客户端测试变得十分困难,因为无法给Si ...

  5. C++模板的理解与使用

    最近发现原来学的东西根本都不理解,所以本人正在恶补C++,把自己对C++中概念的最简单粗暴的理解写下来. 有问题的地方还请指出~随时更正 模板:顾名思义,就是为了方便以后使用而出现的东西,生活中的模板 ...

  6. sed命令和find命令的结合的使用

    linux中查找当前目录及其子目录下的所有test.txt文件,并将文件中的oldboy替换成oldgirl 首先查找出当前目录及其子目录下的所有的test.txt文件 [root@zxl zxl]# ...

  7. spark 源码分析之二 -- SparkContext 的初始化过程

    创建或使用现有Session 从Spark 2.0 开始,引入了 SparkSession的概念,创建或使用已有的session 代码如下: val spark = SparkSession .bui ...

  8. spring 5.x 系列第12篇 —— 整合memcached (代码配置方式)

    文章目录 一.说明 1.1 XMemcached客户端说明 1.2 项目结构说明 1.3 依赖说明 二.spring 整合 memcached 2.1 单机配置 2.2 集群配置 2.3 存储基本类型 ...

  9. outerHTML、innerHTML以及innerText三者的区别

  10. CSS清除默认样式代码

    html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, s ...