• jQuery动态添加元素后，元素注册事件失效

    近日丢酱在学jQuery，在学习的时候遇到了一个问题，虽然最后解决了，但是丢酱觉得要把这个问题解决的方法记录下来，这样有小伙伴遇到同样的问题就不会跟我一样解决好久啦。
    我先贴一段正常逻辑的代码

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <script src="jquery.min.js">script>
    10.     <style>
    11.         * {
    12.             margin: 0;
    13.             padding: 0;
    14.         }
    15.         
    16.         a {
    17.             text-decoration: none;
    18.         }
    19.         
    20.         button {
    21.             position: relative;
    22.             left: 712px;
    23.             top: 97px;
    24.         }
    25.         
    26.         .content {
    27.             width: 500px;
    28.             height: 30px;
    29.             line-height: 30px;
    30.             border: 1px solid #bbb;
    31.             margin: 100px auto;
    32.             border-collapse: collapse;
    33.         }
    34.         
    35.         th {
    36.             background-color: rgb(27, 126, 184);
    37.             color: #fff;
    38.             border: 1px solid #bbb;
    39.         }
    40.         
    41.         td {
    42.             border: 1px solid #bbb;
    43.         }
    44.     style>
    45. head>
    46.  
    47. <body>
    48.     <button>添加数据button>
    49.     <table class="content" align="center">
    50.         <tr>
    51.             <th style="font-weight: 700;">课程名称th>
    52.  
    53.             <th style="font-weight: 700;">所属学院th>
    54.  
    55.             <th style="font-weight: 700;">已学会th>
    56.         tr>
    57.  
    58.     table>
    59.  
    60.     <script>
    61.         $(function() {
    62.             var t1 = $('javaScript传智播客-前端与移动开发学院GET');
    63.             var t2 = $('css传智播客-前端与移动开发学院GET');
    64.             var t3 = $('html传智播客-前端与移动开发学院GET');
    65.             var t4 = $('jQuery传智播客-前端与移动开发学院GET');
    66.             $('button').on('click', function() {
    67.                 // console.log($('table tr'));
    68.                 if ($('table tr').length === 1) {
    69.                     $('table').append(t1);
    70.                     console.log($(".del"));
    71.                     // console.log($('table tr').length);
    72.                 } else if ($('table tr').length === 2) {
    73.                     $('table').append(t2);
    74.                 } else if ($('table tr').length === 3) {
    75.                     $('table').append(t3);
    76.                 } else if ($('table tr').length === 4) {
    77.                     $('table').append(t4);
    78.                 } else {
    79.                     return false;
    80.                 }
    81.             });
    82.             // $("table a").on('click', function() {
    83.             //         $('table').children('tr').remove();
    84.             //     })
    85.  
    86.             $('tr').on('click', 'a', function() {
    87.                 console.log(11);
    88.                 $(this).parents('tr').remove();
    89.             })
    90.         })
    91.     script>
    92. body>
    93.  
    94. html>

    前端页面操作流程：

    1.先点击“添加数据”按钮，把a标签动态生成出来。

    2.再点击a标签（GET），查看控制台。

    结果：控制台啥也没有输出

    因为这样写是有问题的。所有需要修改一下。我先把我修改后的代码贴出来。后面解释

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <script src="jquery.min.js">script>
    10.     <style>
    11.         * {
    12.             margin: 0;
    13.             padding: 0;
    14.         }
    15.         
    16.         a {
    17.             text-decoration: none;
    18.         }
    19.         
    20.         button {
    21.             position: relative;
    22.             left: 712px;
    23.             top: 97px;
    24.         }
    25.         
    26.         .content {
    27.             width: 500px;
    28.             height: 30px;
    29.             line-height: 30px;
    30.             border: 1px solid #bbb;
    31.             margin: 100px auto;
    32.             border-collapse: collapse;
    33.         }
    34.         
    35.         th {
    36.             background-color: rgb(27, 126, 184);
    37.             color: #fff;
    38.             border: 1px solid #bbb;
    39.         }
    40.         
    41.         td {
    42.             border: 1px solid #bbb;
    43.         }
    44.     style>
    45. head>
    46.  
    47. <body>
    48.     <button>添加数据button>
    49.     <table class="content" align="center">
    50.         <tr>
    51.             <th style="font-weight: 700;">课程名称th>
    52.  
    53.             <th style="font-weight: 700;">所属学院th>
    54.  
    55.             <th style="font-weight: 700;">已学会th>
    56.         tr>
    57.  
    58.     table>
    59.  
    60.     <script>
    61.         $(function() {
    62.             var t1 = $('javaScript传智播客-前端与移动开发学院GET');
    63.             var t2 = $('css传智播客-前端与移动开发学院GET');
    64.             var t3 = $('html传智播客-前端与移动开发学院GET');
    65.             var t4 = $('jQuery传智播客-前端与移动开发学院GET');
    66.             $('button').on('click', function() {
    67.                 // console.log($('table tr'));
    68.                 if ($('table tr').length === 1) {
    69.                     $('table').append(t1);
    70.                     console.log($(".del"));
    71.                     // console.log($('table tr').length);
    72.                 } else if ($('table tr').length === 2) {
    73.                     $('table').append(t2);
    74.                 } else if ($('table tr').length === 3) {
    75.                     $('table').append(t3);
    76.                 } else if ($('table tr').length === 4) {
    77.                     $('table').append(t4);
    78.                 } else {
    79.                     return false;
    80.                 }
    81.             });
    82.             // $("table a").on('click', function() {
    83.             //         $('table').children('tr').remove();
    84.             //     })
    85.  
    86.             $('.content').on('click', 'a', function() {
    87.                 console.log(11);
    88.                 $(this).parents('tr').remove();
    89.             })
    90.         })
    91.     script>
    92. body>
    93.  
    94. html>

    前端页面操作流程：

    1.先点击“添加数据”按钮，把a标签动态生成出来。

    2.再点击a标签（GET），查看控制台。

    **结果：控制台开始输出了 **

    开始作解释了。其实大家可以看出来，这里只有一个区别。我把这两个贴出来

    1. // 控制台不输出
    2. // 通过on事件委派来给tr里面的a标签添加点击事件
    3. $('tr').on('click', 'a', function() {
    4.     console.log(11);
    5.     $(this).parents('tr').remove();
    6. })；
    7. // 控制台输出
    8. $('.content').on('click', 'a', function() {
    9.     console.log(11);
    10.     $(this).parents('tr').remove();
    11. })；

    第一个里，我们是事件委派对a标签的元素作单击事件。但是这种jquery获取不到动态添加元素的。

    方案解释：

    on虽然可以给未来动态创建的元素绑定事件，但是要先获取已拥有的父级元素。然后才能再获取动态元素。

    就是相当于说，给父元素添加一个事件（该事件类型和动态元素想要实现的事件类型一样）

    所以这里可以得到：

    1.     <table class="content" align="center">
    2.         <tr>
    3.             <th style="font-weight: 700;">课程名称th>
    4.  
    5.             <th style="font-weight: 700;">所属学院th>
    6.  
    7.             <th style="font-weight: 700;">已学会th>
    8.         tr>
    9.  
    10. // 动态添加的元素
    11.         <tr align="center">
    12.             <td>javaScripttd>
    13.  
    14.             <td>传智播客-前端与移动开发学院td>
    15.             
    16.             <td><a href="javascript:;" class="del">GETa>td>
    17.         tr>
    18.     table>

    .content是a标签的父级

    1. $('.content').on('click', 'a', function() {
    2.     console.log(11);
    3.     $(this).parents('tr').remove();
    4. })

    只要记住，在动态生成的元素中，不能直接指定其事件。只能其父标签的事件后，过滤指定特定元素事件。

    还有一种写法:直接指定dom的元素事件。这也是可以的。

    1. $(document).on('click',"a",function(){
    2. 	console.log("22");
    3. })

  • 相关阅读:
    公司安防工程简要介绍及系统需求分析
    SpringBoot SpringBoot 基础篇(第一篇) 第1章 SpringBoot 入门 1.3 SpringBoot 快速入门
    Tomcat8 WEB-INF更改class后 用manager实现reload
    Nginx 优化
    吉利远景s1
    vue项目性能优化：去除没有引用的文件
    基于 LLM 的知识图谱另类实践
    计算机网络基础知识
    电脑重装系统后如何把网站设为首页
    【电驱动】永磁同步电机工作原理及分类
  • 原文地址：https://blog.csdn.net/DIUDIUjiang/article/details/126284588