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

最新推荐文章于 2023-03-05 23:14:31 发布
最新推荐文章于 2023-03-05 23:14:31 发布
阅读量421 收藏
点赞数
分类专栏： jQuery 文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DIUDIUjiang/article/details/126284588
版权

近日丢酱在学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(27, 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:;" class="del">GET</a></td></tr>');
            var t2 = $('<tr align="center"><td>css</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;">GET</a></td></tr>');
            var t3 = $('<tr align="center"><td>html</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;">GET</a></td></tr>');
            var t4 = $('<tr align="center"><td>jQuery</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;">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(27, 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:;" class="del">GET</a></td></tr>');
            var t2 = $('<tr align="center"><td>css</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;">GET</a></td></tr>');
            var t3 = $('<tr align="center"><td>html</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;">GET</a></td></tr>');
            var t4 = $('<tr align="center"><td>jQuery</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;">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:;" 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");
})

DIUDIUjiang
关注
专栏目录
jquery mobile动态添加元素之后不能正确渲染解决方法说明
12-11
jquerymobile动态添加元素之后有些不能被正确渲染的解决方法：listview： 添加 jq(“.detail”).listview(“refresh”);div或其他：添加.trigger( “create” );====================================================================== jqm在初始化页面时会根据data-xxx在各元素中插入jqm的属性和类等。在页面初始化结束后，如果动态的插入一个元素，往往显示很丑陋，因为没有插入jqm的样式。这个可以用浏览器里的开发工具来查看，会发现有些元素多了很多类，而动态插入
动态添加Jquery元素后在UI中没有显示
weixin_34259559的博客
09-17 293
有时候当利用Jquery动态地向UI中添加一些元素时，并且这些元素很可能也采用了一些class文件（虽然程序逻辑是正确的），但是在UI中看不到相应的效果，这是什么原因呢？ 因为没有及时地渲染新添加进来的元素！ 为了能及时看到新添加进去的元素后UI呈现的效果，可以当添加完成元素后马上执行下面的代码： $.parser.parse(); 来强制浏览器来重新渲染整个页面 ...
关于jQuery出现的新添加元素点击事件无效（jq动态添加元素后，新元素点击无效果解决办法）
CSDN for recording problems
05-31 5271
$(document).on('click','.delete_params',function (e) { console.log(e) $(this).parent('.add_params_tr').remove(); }) 试了试，必须以上述格式绑定点击事件 $('.delete_params').on('cli...
jquery对象给动态生成的元素添加事件失效【项目日常】
m0_62639693的博客
09-11 1255
jquery对象给动态生成的元素添加事件失效 动态生成的元素 一般是ajax异步请求会的响应后根据数据动态渲染生成的，然而ajax技术是异步执行的，ajax请求发送时，ajax请求获得响应需要时间，此时我们的 jquery对象添加事件的代码不会等待ajax请求响应返回，而是继续执行，但是此时因为ajax还未获得请求响应，动态元素还未生成；所以jquery对象事件添加固然会失败。选择器.事件名(function(){ });使用jquery的on函数。
苹果jq. html不显示,javascript-jQuery无法找到刚刚添加的html元素
weixin_39778214的博客
07-14 218
我有以下html代码：我有以下jQuery脚本：function append_list(){$('ul').append('');}function find_input(){//some code to find the just appended input element.}$(document).ready(function(){append_list();console.log($('...
jquery动态添加元素事件失效问题解决方法
10-25
总之，jQuery的`on()`方法是解决动态添加元素事件失效的关键，它通过在静态父元素上监听事件并转发给动态子元素，实现了对动态内容的事件处理。合理使用`on()`方法，能够帮助我们创建更加动态、响应式的Web应用。
解决jQuery使用append添加的元素事件无效的问题
10-18
总的来说，解决jQuery `append`添加元素的事件无效问题，关键在于使用`on`方法代替`click`等直接的事件绑定，并将事件处理器绑定到一个固定的、已存在的父元素上，以便处理动态生成的子元素的事件。这种方法不仅解决...
解决jquery appaend元素中id绑定事件失效的问题
10-19
在jQuery中，动态添加元素（如使用`append`方法）并尝试为这些新添加的元素绑定事件时，可能会遇到一个问题：绑定的事件无法正常触发。这是因为JavaScript的事件处理方式是基于DOM（文档对象模型）的，当元素在页面...
jquery失效的原因及解决办法（1）
weixin_34238642的博客
07-24 1048
2019独角兽企业重金招聘Python工程师标准>>> ...
JQuery 添加动态元素JS或CSS无效
yanghq0915的博客
01-08 1994
JQuery 添加动态元素JS或CSS无效,以及一些容易错误的地方的纠错以及解决办法
jQuery，.after()方法，在tr的后面追加tr
qq_39822451的博客
07-08 2747
<tr id="position"><td>你好</td></tr> <tr><td>马提尼</td></tr> $("#position").after("<tr><td>我是</td></tr>"); html页面的最终显示如下： 你好 我是 马提尼
<form>标签action跳转后，jquery失效的问题
06-28 763
如题，当你在某个jsp页面的标签执行了action操作以后，再返回页面发现页面格式的css和js全部失效，针对这一问题，解决方法就是把jsp中标签中与页面格式有关的css和js文件的引用均改成绝对路径形式。    如原来的css和js文件引入写法为： <link rel="stylesheet" href="bootstrap.min.css" > <script type="text/javasc
jquery点击事件失效原因和解决办法
weixin_44886911的博客
10-10 4061
这里写自定义目录标题jquery点击事件失效原因和解决办法 jquery点击事件失效原因和解决办法 原文地址：https://www.cnblogs.com/leiting/p/9323539.html 在使用jQuery绑定点击事件的时候，有时候会遇到点击无效，这种情况大多出现在动态添加元素的时候。 例如：给demo里添加li元素给li绑定点击事件 $("#demo").append('<li>点我</li>'); 给li元素绑定点击事件 // 示范一 $("#demo li
解决jquery绑定点击事件失效问题
小小白的博客
12-26 2578
解决jquery绑定点击事件失效问题
jquery 动态增加的html使得click事件失效
最新发布
coloma2012的博客
03-05 1669
使用ajax读取数据列表，，class为“item”,用$(“.item”).click(function(){ //do selting})，后面通过ajax加载进来的列表中的item按钮，点击事件会失效。最简单的方法就是直接在标签中写οnclick=””，但是这样写其实是有点low的，最好的方式还是通过给类名绑定一个click事件。live()函数会给被选的元素绑定上一个或者多个事件处理程序，并且规定当这些事件发生时运行的函数。通过live()函数适用于匹配选择器的当前及未来的元素。
jQuery addClass生效之后又消失
qq_51014805的博客
11-27 556
原因： 当你点击一个链接时，页面的整个DOM被拆除和丢弃，并创造了DOM更换通过阅读新页面的HTML。所以您对旧DOM的更改不会持久。 <ul class="nav nav-sidebar"> <li class="active"><a href="home.html" >收藏中心</a></li> <li><a href="index.html">主页<
jQuery动态append添加元素点击事件失效
qq_38332574的博客
09-25 1万+
最近开始做前端，遇到一些问题，现在记录一下，以备不时之需。 问题描述：在div中动态添加span元素，之后执行 $(selector).click(function(){var param = $(this).text();}) 无法触发事件。 原因：append中的节点是在整个文档加载完之后开始添加，页面不会为append的元素初始化添加点击事件，故使用这种方式动态添加的节点中的cli...
jquery append添加的元素用jquery无法获取到
IT技术宅-北方的刀郎
04-12 2063
当获取$("#art-list")页面元素后去在后面追加标签的时候（append），在下面用 $(selector) 获取刚刚添加的标签，发现怎么都获取不到。 因为页面已经将JS加载完毕，此时新增请求动态添加节点，自然获取不到,也不会为append的元素初始化添加事件 需要事件委托才能获取到节点，也就是说要用： $(selector).on(events,[selector],[data]...
解决jQuery使用append添加的元素事件无效的方法
热门推荐
逸尘的专栏
03-17 3万+
jquery api官方的例子在新增的元素上添加事件 $(document).on("click",'#lyysb a',function(){ if(!$(this).hasClass('cur')){ $(this).addClass('cur'); } else { $(this).removeClass('cur'); } });on() 方法在被选元素及子元素上
解决jQuery on()方法失效：版本、格式与实例解析
jQuery的`on()`函数是一个强大的事件绑定器，它允许我们在DOM元素动态添加或修改时，仍然能够正确地处理事件。本文将从以下几个方面深入解析： 1. **后绑定与事件结构**: `on()`方法通常用于后绑定事件，即在DOM...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值