用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>

随机推荐

  1. ERROR 1872 (HY000): Slave failed to initialize relay log info structure from the repository

    salve复制线程停止,尝试start slave 时报ERROR 1872错误mysql> system perror 1872 MySQL error code 1872 (ER_SLAVE ...

  2. 登录时的&quot;记住我&quot;

    当我们在做各个系统的登录界面时,喜欢在加上一个功能就是“记住我”, 我用js来实现一下看看 function SetCookie(name, value, expires, path, domain, ...

  3. qml操作播放器

    现在增加了一个filter属性,所以可以很好和opencv结合.转一篇文章(http://blog.qt.io/blog/2015/03/20/introducing-video-filters-in ...

  4. Firefox 对条件判断语句块内的函数声明的处理与其他浏览器有差异

    标准参考 函数声明和函数表达式 定义一个函数有两种途径:函数声明和函数表达式. 函数声明: function Identifier ( FormalParameterList opt ) { Func ...

  5. post请求json内容丢失问题

    今天在项目组用json传输数据 post方法提交 发现传输过去的数据json内的+ 号被直接干掉了. 后来传输之前直接先编码. 接收端: public void ProcessRequest(Http ...

  6. 我的PHP之旅--PHP的函数初步认识

    函数 函数主要是将一块代码封装起来方便多次使用,方便以后维护,节省代码. 先看一个简单的函数: <?php function myFirstFunc(){ echo "Hello PH ...

  7. NET Core 数据保护2

    ASP.NET Core 数据保护(Data Protection 集群场景)[下]   前言 接[中篇],在有一些场景下,我们需要对 ASP.NET Core 的加密方法进行扩展,来适应我们的需求, ...

  8. radhat6.6上安装oracle12c RAC (一)

    软件环境:VMware.redhat6.6.oracle12c(linuxx64_12201_database.zip).12cgrid(linuxx64_12201_grid_home.zip) 一 ...

  9. 将Json数据 填充到 实例类 的函数

    /// <summary> /// 将Json数据 填充到 实例类 /// </summary> /// <typeparam name="T"> ...

  10. java中LIst转换成Json

    List转换成json串 public String getNameListByID(Long Id) { List<Name> nameLists= nameService.select ...