在项目中遇到需要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. 第一百三十二节，JavaScript，封装库--下拉菜单

    JavaScript,封装库--下拉菜单 封装库,增加了3个方法 shu_biao_yi_ru_yi_chu()方法,给元素设置鼠标移入移出事件,接收两个参数,参数是移入和移出时的执行函数(包含代码) ...

  2. Redis的安装和使用之------Redis相关运用

    原文  http://wangzhijian.blog.51cto.com/6427016/1731962 一.简介 REmote DIctionary Server(Redis) 是一个由 Salv ...

  3. Spring MVC 返回json数据 报406错误 问题解决方案

    将jackson jar包改为jackson-databind-2.5.0.jar  jackson-core-2.5.0.jar  jackson-annotations-2.5.0.jar(这个版 ...

  4. 关于AVL实现的代码记录

    试题集合: https://www.patest.cn/contests/pat-a-practise/1064 https://www.patest.cn/contests/pat-a-practi ...

  5. solr常用命令

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

  6. 单身福利来了：VR恋人为你量身定制一个女朋友

    相对于传统视频体验,VR视频给人带来了更加真实的体验.特别是对于单身狗来说,能在VR中拥有一个虚拟的恋人可谓是莫大的心灵安慰.近日,上海微雁文化传媒有限公司正式发布了首款养成类手机应用VR恋人. VR ...

  7. line-height 行高

    line-height 行高指一行文字的高度,具体来说是指两行文子间基线间的距离      line-height 与 font-size 的计算值之差(行距)分为两半,分别加到一个文本行内容的顶部和 ...

  8. Batch File Rename Utility(文件批量改名软件) 1.1.4231

    软件名称: Batch File Rename Utility(文件批量改名软件) 1.1.4231.23098 软件语言: 英文 授权方式: 免费软件 运行环境: Win7 / Vista / Wi ...

  9. unittest框架概要

    unittest是Python语言自带的单元测试框架,原名PyUnit. 认识unittest 在unittest框架中有4个重要概念:test fixture.test case.test suit ...

  10. layer ifram 弹出框

    父层 <div class="col-xs-4 text-left" style="padding-left: 50px;"><button ...