在项目中遇到需要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. 记一次kali和win8.1的双系统修复！！

    简要情况: 原来电脑存在的系统:win7和kali. 后来的系统:win8.1和原本的kali 情况描述:在我装完win8.1后就直接启动到win8.1了没有了grub2的选择启动界面,但是我还是想要 ...

  2. C语言调用lua

    在lua API中,调用一个函数的步骤很简单: 1.压入你要调用的函数,使用lua_getglobal. 2.压入调用参数. 3.使用lua_pcall 4.从栈中弹出结果.   举例说明,假设你有这 ...

  3. python 数组过滤

    arr = [1,2,3,4,5,6,7,8,None]arr = [elem for elem in arr if elem != None]

  4. YYKit笔记之FPS

    FPS计算方法 FPS是Frame per second的缩写,即每秒的帧数.这一术语广泛的应用于计算机图形学,视频采集,游戏等. CADisplayLink CADisplayLink是一个能让我们 ...

  5. jdk 多版本安装 for mac

    2016年mac上已经安装有jdk1.6的版本  目录在/Library/Java/JavaVirtualMachines/1.6.0.jdk 有时候mac版本跟新会自动删除jdk1.6 所以要去ma ...

  6. Python学习笔记——基础篇【第一周】——变量与赋值、用户交互、条件判断、循环控制、数据类型、文本操作

    目录 Python第一周笔记 1.学习Python目的 2.Python简史介绍 3.Python3特性 4.Hello World程序 5.变量与赋值 6.用户交互 7.条件判断与缩进 8.循环控制 ...

  7. Python学习笔记——基础篇【第六周】——面向对象

    Python之路,Day6 - 面向对象学习 本节内容:   面向对象编程介绍 为什么要用面向对象进行开发? 面向对象的特性:封装.继承.多态 类.方法.       同时可参考链接: http:// ...

  8. SpannableString可以被点击的文字

    1 TextView tv= (TextView) findViewById(R.id.textview_z); String text="一段可以被点击点击的文字,文字可以变成图片&quo ...

  9. ResultSet.TYPE_SCROLL_SENSITIVE问题（完全摘自他人）

    摘自CSDN博客 我们先来做一个例子,在例子中我用的是mysql-essential-5.1.30-win32版. 来跟我做以下几个命令: mysql> create database axma ...

  10. vscode: Visual Studio Code 常用快捷键

    vscode: Visual Studio Code 常用快捷键 主命令框 F1 或 Ctrl+Shift+P: 打开命令面板.在打开的输入框内,可以输入任何命令,例如: 按一下 Backspace ...