文章
  • JS插件
  • 整站源码
  • html模板
  • 共享资源
  • 文章
热门搜索： 微信小程序 qq登陆 thinkphp 微信登陆
窝币充值 开通VIP
插件窝 干货文章 jQuery动态添加元素后元素注册事件失效解决

jQuery动态添加元素后元素注册事件失效解决

nofollow external gt lt 876    来源：    2024-10-11

前言：

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

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
        }
        button {
            position: relative;
            left: 712px;
            top: 97px;
        }
        .content {
            width: 500px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #bbb;
            margin: 100px auto;
            border-collapse: collapse;
        }
        th {
            background-color: rgb(null, 126, 184);
            color: #fff;
            border: 1px solid #bbb;
        }
        td {
            border: 1px solid #bbb;
        }
    </style>
</head>
<body>
    <button>添加数据</button>
    <table class="content" align="center">
        <tr>
            <th style="font-weight: 700;">课程名称</th>
            <th style="font-weight: 700;">所属学院</th>
            <th style="font-weight: 700;">已学会</th>
        </tr>
    </table>
    <script>
        $(function() {
            var t1 = $('<tr align="center"><td>javaScript</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="del">GET</a></td></tr>');
            var t2 = $('<tr align="center"><td>css</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >GET</a></td></tr>');
            var t3 = $('<tr align="center"><td>html</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >GET</a></td></tr>');
            var t4 = $('<tr align="center"><td>jQuery</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >GET</a></td></tr>');
            $('button').on('click', function() {
                // console.log($('table tr'));
                if ($('table tr').length === 1) {
                    $('table').append(t1);
                    console.log($(".del"));
                    // console.log($('table tr').length);
                } else if ($('table tr').length === 2) {
                    $('table').append(t2);
                } else if ($('table tr').length === 3) {
                    $('table').append(t3);
                } else if ($('table tr').length === 4) {
                    $('table').append(t4);
                } else {
                    return false;
                }
            });
            // $("table a").on('click', function() {
            //         $('table').children('tr').remove();
            //     })
 
            $('tr').on('click', 'a', function() {
                console.log(11);
                $(this).parents('tr').remove();
            })
        })
    </script>
</body>
</html>

前端页面操作流程：

  • 1.先点击“添加数据”按钮，把a标签动态生成出来。
  • 2.再点击a标签（GET），查看控制台。

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none;
        }
        button {
            position: relative;
            left: 712px;
            top: 97px;
        }
        .content {
            width: 500px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #bbb;
            margin: 100px auto;
            border-collapse: collapse;
        }
        th {
            background-color: rgb(null, 126, 184);
            color: #fff;
            border: 1px solid #bbb;
        }
        td {
            border: 1px solid #bbb;
        }
    </style>
</head>
<body>
    <button>添加数据</button>
    <table class="content" align="center">
        <tr>
            <th style="font-weight: 700;">课程名称</th>
            <th style="font-weight: 700;">所属学院</th>
            <th style="font-weight: 700;">已学会</th>
        </tr>
    </table>
    <script>
        $(function() {
            var t1 = $('<tr align="center"><td>javaScript</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="del">GET</a></td></tr>');
            var t2 = $('<tr align="center"><td>css</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >GET</a></td></tr>');
            var t3 = $('<tr align="center"><td>html</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >GET</a></td></tr>');
            var t4 = $('<tr align="center"><td>jQuery</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >GET</a></td></tr>');
            $('button').on('click', function() {
                // console.log($('table tr'));
                if ($('table tr').length === 1) {
                    $('table').append(t1);
                    console.log($(".del"));
                    // console.log($('table tr').length);
                } else if ($('table tr').length === 2) {
                    $('table').append(t2);
                } else if ($('table tr').length === 3) {
                    $('table').append(t3);
                } else if ($('table tr').length === 4) {
                    $('table').append(t4);
                } else {
                    return false;
                }
            });
            // $("table a").on('click', function() {
            //         $('table').children('tr').remove();
            //     })
            $('.content').on('click', 'a', function() {
                console.log(11);
                $(this).parents('tr').remove();
            })
        })
    </script>
</body>
</html>

前端页面操作流程：

  • 1.先点击“添加数据”按钮，把a标签动态生成出来。
  • 2.再点击a标签（GET），查看控制台。

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

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

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

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

方案解释：

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

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

所以这里可以得到：

    <table class="content" align="center">
        <tr>
            <th style="font-weight: 700;">课程名称</th>
            <th style="font-weight: 700;">所属学院</th>
            <th style="font-weight: 700;">已学会</th>
        </tr>
 
// 动态添加的元素
        <tr align="center">
            <td>javaScript</td>
            <td>传智播客-前端与移动开发学院</td>
            <td><a href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="del">GET</a></td>
        </tr>
    </table>

.content是a标签的父级

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

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

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

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

到此这篇关于jQuery动态添加元素后元素注册事件失效解决的文章就介绍到这了,更多相关jQuery添加元素内容请搜索插件窝以前的文章或继续浏览下面的相关文章希望大家以后多多支持插件窝！

上一篇：jQuery编程动画的基本方法示例详解
下一篇：Axios和Jquery实现文件上传功能

推荐文章

热门文章

关于我们 | 免责声明 | 注册协议 | 客服QQ: 236095280 236095279
Copyright©2018-2024 All Rights Reserved. 琼ICP备16003363号-7