zoukankan      html  css  js  c++  java
  • jquery append 动态添加的元素绑定事件on

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delete)。

    具体不多说了,请看下面的代码吧。

     1 <!DOCTYPE html">
     2 <html>
     3 <head>
     4     <meta charset=UTF-8">
     5     <title>测试</title>
     6     <script type="text/javascript"
     7             src="js/jquery.js"></script>
     8     <script type="text/javascript">
     9         $(function(){
    10 //动态添加
    11             $(".add").on("click",function(){
    12                 console.log("进来了");
    13                 $(".info").append('<div class="delete"><h3>单击我来删除我</h3></div>');
    14             });
    15             //对动态添加的元素添加事件-删除
    16             $(".info").on("click",".delete",function(){
    17                 console.log("进来了Delete!");
    18                 $(this).remove();
    19             });
    20         });
    21     </script>
    22 </head>
    23 <body>
    24 <h2 class='add'>单击我添加动态元素</h2>
    25 <div class="info"></div>
    26 </body>
    27 </html>
  • 相关阅读:
    MySQL学习笔记
    FileInputStream
    Java 多个if 和多个else if 的区别
    Flume 聚合
    Flume SinkProcessor
    Flume ChannelSelector (包括自定义flume拦截器)
    Flume 案例演示
    為政第二
    各种版本 WordCount
    學而第一
  • 原文地址:https://www.cnblogs.com/nifengs/p/4901533.html
Copyright © 2011-2022 走看看