最近在做项目的时候发现的一个问题，通过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. C++实现半透明按钮控件(PNG,GDI+)

    http://blog.csdn.net/witch_soya/article/details/6889904

  2. Codility---CountFactors

    Task description A positive integer D is a factor of a positive integer N if there exists an integer ...

  3. 浏览器引擎-phantomjs初次认识

    最近没什么重要的任务,就抽空看了看项目组爬虫小组的代码,因为我们的爬虫主要是以python的scrapy框架为主,看起来比较方便.在看代码的时候看到一个叫phantomjs的东西,蛮新鲜的,就去问了下 ...

  4. ABAP中SPLIT关键字 当分隔符位于字符串首尾时

    使用SPLIT关键字将一个字符串按某个分隔符拆分,如果分隔符穿插在字符串中间(即首尾字符均不是分隔符的情况),我们很容易知道拆分后的结果,但如果分隔符恰好位于字符串首或者末尾呢? 如下面的代码所示,在 ...

  5. spring与springmvc父子容器

    转载地址:http://www.tianshouzhi.com/api/tutorials/spring 1.spring和springmvc父子容器概念介绍 在spring和springmvc进行整 ...

  6. Electron为文件浏览器创建图标(三)

    在前面的文章中,请看之前文章,我们已经完成了使用 electron做文件浏览器这么一个应用,现在我们需要为应用创建图标操作.为应用创建图标以后,我们就可以从计算机中与其他应用区分开来,如果我们自己会做 ...

  7. ZTree简单粗暴快速使用

    是什么:功能强大的树形插件 tip:查资料时痛苦的地方,自我改进 1.没有注明版本:版本不对应导致配置完成后各种无端的错误,特别难查找,运气好能找到英文的解答 2.没有写明配置文件,或者不指明配置文件 ...

  8. Salesforce LWC学习(二) helloWorld程序在VSCode中的实现

    上一篇我们简单的描述了一下Salesforce DX的配置以及CLI的简单功能使用,此篇主要简单描述一下LWC如何实现helloWorld以及LWC开发时应该注意的一些规范. 做国内项目的同学直观的感 ...

  9. springboot-redis-crda example

    springboot-redis-crda example 1. 从 https://github.com/XLuffyStory/springboot-redis-crdu 拿到源码之后,导入到ST ...

  10. mail.inc实现周密的留言发邮箱

    我网站上很多地方都有给我留言的链接,这些链接指向一个地方 http://www.dushangself.site/emlog/?post=8 (源码使用方式:一共四个源代码,第一个和第二个写在一起,, ...