用jquery添加新元素很容易，面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢？on方法中要先找到原选择器（如例.info),再找到动态添加的选择器（如列.delete)。

具体不多说了，请看下面的代码吧。

 <!DOCTYPE html">

 <html>

 <head>

     <meta charset=UTF-8">

     <title>测试</title>

     <script type="text/javascript"

             src="js/jquery.js"></script>

     <script type="text/javascript">

         $(function(){

 //动态添加

             $(".add").on("click",function(){

                 console.log("进来了");

                 $(".info").append('<div class="delete"><h3>单击我来删除我</h3></div>');

             });

             //对动态添加的元素添加事件-删除

             $(".info").on("click",".delete",function(){

                 console.log("进来了Delete！");

                 $(this).remove();

             });

         });

     </script>

 </head>

 <body>

 <h2 class='add'>单击我添加动态元素</h2>

 <div class="info"></div>

 </body>

 </html>

jquery append 动态添加的元素绑定事件on的更多相关文章

  1. WEB前端技巧之JQuery为动态添加的元素绑定事件.md

      jquery 为动态添加的元素绑定事件 如果直接写click函数的话,只能把事件绑定在已经存在的元素上,不能绑定在动态添加的元素上 可以用delegate来实现 .delegate( select ...

  2. jQuery 为动态添加的元素绑定事件

    在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...

  3. jQuery对 动态添加 的元素 绑定事件（on()的用法）

    从jQuery 版本 1.7 起,on() 方法是向被选元素添加事件处理程序的(官方推荐)首选方法. 当浏览器下载完一个页面的时候就开始渲染(翻译)HTML标签,然后执行css.js代码,在执行js代 ...

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

    我们在开发过程会遇到无法给动态元素添加绑定事件,解决方案如下: 例如 <div id="testdiv">   <ul></ul> </d ...

  5. jquery html动态添加的元素绑定事件详解

    在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况: <div id="testdiv"> <ul></ul> </div&g ...

  6. 关于 jquery html 动态添加的元素绑定事件——On()

    Ajax动态生成的数据,动作绑定需要重新执行 $(document).on('click','.btn1',function(){}); 替换: $('btn1').on('click') = fun ...

  7. [转]jquery append 动态添加的元素事件on 不起作用的解决方案

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  8. Jquery动态添加的元素绑定事件的3种方法

    假设我们点击li标签,弹出他的文本,如果是动态添加的li,点击是没有效果的,压根弹不出来文本. 下面博主分享一下为动态添加的元素绑定事件的三种方法,网上一般都是两种,我在这里多增加了一种. 事件案例: ...

  9. jquery append 动态添加的元素事件on 不起作用的解决方案

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

随机推荐

  1. php中使用swoole实现头协议

    当需要有数据交互的时候,为了安全起见,双方会协商一个固定的头协议,这样必须实现其头协议才能拿到数据. PHP的swoole完美的提供了固定包头+包体协议自动分包. 首先需要通过open_length_ ...

  2. ubuntu指令记录

    记录一些指令,便于查看使用. 1.sudo -以其他身份运行命令,预设身份为root. 2.ctrl+alt+T打开终端(命令行窗口) 3.如何判断linux系统是32位还是64位,指令:getcon ...

  3. 使用PHP画统计图的方法

    <?php //最后一次修改:2004-6-21 //一个生成矩形图,曲线图的图形分析类 //作者:tonera //说明: //任何人可在任何场合自由使用这个类.但由此所发生的损害跟作者无关. ...

  4. Swift 线程安全数组

    欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:BigNerdCoding 有并发的地方就存在线程安全问题,尤其是对于 Swift 这种还没有内置并发支持的语言来说线程安全问题更为突出 ...

  5. Swagger服务API治理详解

    swager2的简介 在App后端开发中经常需要对移动客户端(Android.iOS)提供RESTful API接口,在后期版本快速迭代的过程中,修改接口实现的时候都必须同步修改接口文档,而文档与代码 ...

  6. Sagit.Framework For IOS 开发框架入门教程3：Start引导页及框架布局和隐藏事件的内幕

    前言: 框架依旧在快速更新着:在重构.简化代码,统一标准的过程中. 中间也遇到各种坑,不过好在一步一脚印的解决了. 虽然还有些功能还在思考,不过教程,还是得补上: 上篇文章:Sagit.Framewo ...

  7. Linux中MySQL5.6编译安装与MySQL5.7二进制安装步骤

    首先,介绍一下MySQL的几种安装方式 1.RPM.Yum 的安装方式:安装方便.安装速度快,无法定制 2.二进制:不需要安装,解压即可使用,不能定制功能 3.编译安装:可定制,安装慢. 编译安装中需 ...

  8. 版本号控制-GitHub

    前面几篇文章.我们介绍了Git的基本使用方法及Gitserver的搭建.本篇文章来学习一下怎样使用GitHub. GitHub是开源的代码库以及版本号控制库,是眼下使用网络上使用最为广泛的服务,Git ...

  9. opensslBIO系列之2---BIO结构和BIO相关文件介绍

    BIO结构和BIO相关文件介绍     (作者:DragonKing Mail:wzhah@263.net 公布于:http://gdwzh.126.com openssl专业论坛)          ...

  10. 怎样将word文件转化为Latex文件：word-to-latex-2.56具体解释

    首先推荐大家读一读这篇博文:http://blog.csdn.net/ibingow/article/details/8613556 --------------------------------- ...