在项目中遇到需要jQuery动态添加元素的事件，做了一个demo，方便以后遇到相同的问题可以用上：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>

    </head>

    <body>

        <div class="clickAdd"><input type="button" value="按钮"></div>

        <br />

        <br />

        <br />

        <span class="clickCon">在我的左边添加了一段话，这段话是：</span>

        <script type="text/javascript">

            $(function(){

                //动态添加事件

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

                    console.log("追加了内容");

                    $(".clickCon").append('<span class="delete">点击我可以删除我，来试试！</span>');

                });

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

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

                    console.log("内容删除成功");

                    $(this).remove();

                });

            });

        </script>

    </body>

</html>

jQuery动态添加元素事件的更多相关文章

  1. jquery动态添加元素无法触发绑定事件的解决方案。

    jquery动态添加元素无法触发绑定的事件的解决方案. ╭(●｀∀´●)╯二狗最近在工作中遇到一个问题,即当用jquery动态添加元素后,发现给动态添加的元素却无法触发事件(╯#-_-)╯╧═╧ ( ...

  2. Jquery动态添加元素并给元素增加onchange相应

    动态添加元素: $select = $("<select></select>"); $("<option></option> ...

  3. jquery动态添加元素无法触发绑定的事件的解决方案

    方法一:绑定live事件(live事件只在jquery1.9以下才支持,高版本不支持). //jquery 1.9(不包括1.9)以下可以 $(".btn").live(" ...

  4. Jquery 动态添加元素 添加点击事件

    给动态添加的元素添加js事件,不能直接添加js事件,需要借助on( )方法,给选择器指定的子元素添加事件处理函数,并非选择器本身: 1. 语法 $(selector).on(event,childSe ...

  5. jQuery动态添加元素并绑定事件

    写网页的时候常常需要根据实际情况添加新的元素,然后这些新元素还需要绑定已有的事件,如:有一ul,点击其中某 li,根据其 id 或 value 等获取新的数据列表,并新建 ul 显示,新 ul 中的 ...

  6. jQuery 新添加元素事件绑定无效

    jQuery中事件绑定,大多使用on就足够了. 但是对于新添加的元素 on 的绑定事件 会不起作用. 因为 append 中的 节点是在整个文档加载之后才添加的,页面并不会为未来的元素初始化添加点击事 ...

  7. jQuery动态添加元素,并提交json格式数据到后台

    参考:https://www.cnblogs.com/shj-com/p/7878727.html 下载 下载该插件的地址是:http://www.bootcdn.cn/jquery.serializ ...

  8. Jquery 动态添加元素后，获取不到元素对象情况

  9. jqery 动态添加元素 绑定事件

    jQuery动态添加元素: var url = "...";//服务地址 $.ajax({ type: 'post', url: url, data:{fireId:fireId} ...

随机推荐

  1. 使用pip安装报错的处理方法

    在新的机子上使用pip安装程序一直报错: Retrying (Retry(total=4, connect=None, read=None, redirect=None)) after connect ...

  2. Unity3D 浏览工具

    键盘控制: 1.键盘箭头:先选中场景激活场景 按箭头前后左右  shift +箭头 加速移动 2.使物体成为场景焦点:左侧层次视图列表选中物体,移动鼠标指针到场景视图上 按F,选中物体成为场景视图中心 ...

  3. mongo数据库时间存储的问题

    题记:项目中要加的内容,可以实现对设备的预定,被某个用户预定后的设备就不能再被其他用户所使用了,用户预定的时候就需要输入预定时间,web前端用到了boostrap的date的一个插件,非常好用,接下来 ...

  4. [HMLY]11.iOS函数式编程的实现&&响应式编程概念

    简介 本篇主要回顾一下--iOS函数式编程 && 响应式编程概念 ,如何一步步实现函数式编程的过程,对阅读Masonry && SnapKit源码有一定的帮助. 作为一 ...

  5. 第一百二十六节，JavaScript，XPath操作xml节点

    第一百二十六节,JavaScript,XPath操作xml节点 学习要点: 1.IE中的XPath 2.W3C中的XPath 3.XPath跨浏览器兼容 XPath是一种节点查找手段,对比之前使用标准 ...

  6. gulp备忘

    // npm install gulp gulp-sourcemaps gulp-name gulp-notify del --save-dev // npm install gulp-ruby-sa ...

  7. SpringMVC实现注解式权限验证（转）

    SpringMVC学习系列(9) 之 实现注解式权限验证   对大部分系统来说都需要权限管理来决定不同用户可以看到哪些内容,那么如何在Spring MVC中实现权限验证呢?当然我们可以继续使用serv ...

  8. solr常用命令

    1.启动和关闭 a.启动和重启 启动和重启命令有很多选项让你运行在SolrCloud模式,使用示例配置,以hostname为开头或者非默认端口,指向本地ZooKeeper. bin/solr star ...

  9. feature2d相关

    1.Harris角点检测 是基于灰度图像的角点检测. 灰度变化率函数如下: 其中的w(x,y)为加权函数,可为常数或为高斯函数.之后对E(u,v)进行泰勒级数的展开与化简,最终得到 ,,Ix,Iy是图 ...

  10. 面向对象UML中类关系

    如果你确定两件对象之间是is-a的关系,那么此时你应该使用继承:比如菱形.圆形和方形都是形状的一种,那么他们都应该从形状类继承而不是聚合.如果你确定两件对象之间是has-a的关系,那么此时你应该使用聚 ...