最近在做项目的时候发现的一个问题,通过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. Openssl - Static libraries (w32, mingw) 以及对Qt静态编译时的设置

    Openssl static libraries created for Windows 32bit using MinGW compiler   Compiled with:       ./Con ...

  2. 跨进程访问VCL的一个用例(Delphi6、TurboDelphi测试通过)

    Controls.pas单元中有一个FindControl函数,通过句柄获得对应的TWinControl对象. function FindControl(Handle: HWnd): TWinCont ...

  3. 多线程基础理论--C#

    1.主线程 进程创建时,默认创建一个线程,这个线程就是主线程.主线程是产生其他子线程的线程,同时,主线程必须是最后一个结束执行的线程,它完成各种关闭其他子线程的操作.尽管主线程是程序开始时自动创建的, ...

  4. python发送邮件554DT:SPM已解决

    说明:本例使用163邮箱 一.报错信息 使用SMTP发送邮件遇到以下报错: 554, b'DT:SPM 163 smtp10,DsCowACXeOtmjRRdsY8aCw--.21947S2 1561 ...

  5. Python自学day-11

    一.RabbitMQ概述 RabbitMQ是一种消息队列,是一个公共的消息中间件,用于不同进程之间的通讯. 除了RabbitMQ以外,还有ZeroMQ.ActiveMQ等等. 前面学习了两种队列: 线 ...

  6. .Net之使用Jquery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径

    前言: 首先对于图片上传而言,在我们的项目开发中可以说出现的频率是相当的高的.这篇文章中,我将要描述的是在我们.Net中如何使用Jquery Ajax通过FormData对象异步提交图片文件到后台保存 ...

  7. 搭建CentOS 7本地源仓库

    CentOS 7离线包及其依赖 推荐使用yumdownloader --resolve --destdir=path python-pip,--resolve下载所有依赖,--destdir指定软件包 ...

  8. iOS 国际化 (国际化文字内容不改变,app名字国际化,一键切换语言)

    首先我们要分三个步骤讲解怎么一步步实现app名字国际化.内容国际化.一键切换国际化的: 一.app设置内容或者可以说是app名字或者可以说Info.Plist中的东西国际化  app名字国际化  1. ...

  9. 测试调试-利用fiddler修改response返回结果

    测试前端过程中,经常需要验证各种功能状态.不同数据层级等返回后的展示效果.一般会通过以下三种方式进行测试: 1.构造满足条件的测试数据:(耗时费力) 2.修改数据库:(前提需要了解数据库数据存储.沟通 ...

  10. 【POJ - 1426】Find The Multiple(dfs)

    -->Find The Multiple 原文是英语,直接上中文了 Descriptions: 给定一个正整数n,请编写一个程序来寻找n的一个非零的倍数m,这个m应当在十进制表示时每一位上只包含 ...