首頁 > 軟體

jQuery動態新增元素後元素註冊事件失效解決

2022-08-12 22:00:31

前言：

近日丟醬在學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:;" 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(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:;" 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新增元素內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！


相關文章

  • 德漢姆中學就讀條件 德漢姆中學就讀條件

    <em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011

    2021-06-01 09:32:01

  • 黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列 黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列

    综合看Anker超能充系列的性价比很高，并且与不仅和iPhone12/苹果<em>Mac</em>Book很配，而且适合多设备充电需求的日常使用或差旅场景，不管是安卓还是Switch同样也能用得上它，希望这次分享能给准备购入充电器的小伙伴们有所

    2021-06-01 09:31:42

  • 吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！ 吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！

    除了L4WUDU与吴亦凡已经多次共事，成为了明面上的厂牌成员，吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节，这也是20XXCLUB首次全员合照，王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让

    2021-06-01 09:31:34

  • IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？ IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？

    目前应用IPFS的机构：1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆，历史资料永久保存在 IPFS 6 加

    2021-06-01 09:31:24

  • 有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊 有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊

    开拓者的车机是兼容苹果和<em>安卓</em>，虽然我不怎么用，但确实兼顾了我家人的很多需求：副驾的门板还配有解锁开关，有的时候老婆开车，下车的时候偶尔会忘记解锁，我在副驾驶可以自己开门：第二排设计很好，不仅配置了一个很大的

    2021-06-01 09:30:48

  • iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？ iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？

    不仅是<em>安卓</em>手机，苹果手机的降价力度也是前所未有了，iPhone12也“跳水价”了，发布价是6799元，如今已经跌至5308元，降价幅度超过1400元，最新定价确认了。iPhone12是苹果首款5G手机，同时也是全球首款5nm芯片的智能机，它

    2021-06-01 09:30:45

IT145.com E-mail:sddin#qq.com