在项目中遇到需要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. 《DSP using MATLAB》示例 Example 6.5

    代码: b = [1, 0, 0, 0, 16+1/16, 0, 0, 0, 1]; broots = roots(b) B1 = real(poly([broots(1), broots(2), b ...

  2. 数据挖掘_wget整站下载

    你应该了解的所有wget命令 翻译自All the Wget Commands You Should Know 如何下载整个网站用来离线浏览?怎样将一个网站上的所有MP3文件保存到本地的一个目录中?怎 ...

  3. SSH 一些错误的解决办法

    1.主动访问的机器需要创建私钥和公钥 (client) #cd ~#mkdir .ssh#chmod 700 .ssh#cd .ssh#ssh-keygen -t rsa //一路回车,各种提示按默认 ...

  4. C#基础--属性

    定义一个Book类: namespace ConsoleTest { public class Book { private string _bookIsbn; private string _boo ...

  5. ligerUI实现分页

    在公司实习看到公司框架里使用了ligerUI的grid进行分页,个人感觉挺好用的,自己摸索着实现了一遍记录下来 简单来说,liger grid 就是提交准备好的数据到指定的目标请求数据,拿到数据以后, ...

  6. Struts2 注解零配置方法（convention插件使用）

    最近接触到一个新的项目,是做一个使用S2SH的电子商务商城的二次开发.之前使用过S2SH,在此之前的项目中,Struts2 使用的是XML配置而这个项目是使用注解.在这个项目中,注解还不需要使用Act ...

  7. A* 寻路算法学习

    代码小记 #include <iostream> #include <list> struct POINT { int X; int Y; }; // G: 起点到当前点的成本 ...

  8. DataGrid 导出数据到 Excel

    Private Sub GridToExl_Click() On Error Resume Next If DataGrid1.Columns.Count = 0 Then MsgBox " ...

  9. ASP.NET 企业组织机构代码验证

    /// <summary> /// 组织机构代码验证 /// </summary> /// <param name="arg"></par ...

  10. python 之调用Linux shell命令及相关高级应用

    最近根据老大要求,将数据进行同步备份,结合第三方提供的工具.第三方服务其实是有python demo的,本想研究下实际的python sdk搞个demo开发的,但是发现有些组建装起来确实头大,而且本公 ...