溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

jQuery動態(tài)添加元素后元素注冊事件失效如何解決

發(fā)布時間：2022-08-13 09:46:52 來源：億速云 閱讀：122 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要介紹了jQuery動態(tài)添加元素后元素注冊事件失效如何解決的相關(guān)知識，內(nèi)容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇jQuery動態(tài)添加元素后元素注冊事件失效如何解決文章都會有所收獲，下面我們一起來看看吧。

    正常邏輯的代碼

    <!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>添加數(shù)據(jù)</button>
    <table class="content" align="center">
        <tr>
            <th >課程名稱</th>
            <th >所屬學院</th>
            <th >已學會</th>
        </tr>
    </table>
    <script>
        $(function() {
            var t1 = $('<tr align="center"><td>javaScript</td><td>傳智播客-前端與移動開發(fā)學院</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>傳智播客-前端與移動開發(fā)學院</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>傳智播客-前端與移動開發(fā)學院</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>傳智播客-前端與移動開發(fā)學院</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.先點擊“添加數(shù)據(jù)”按鈕，把a標簽動態(tài)生成出來。

    • 2.再點擊a標簽（GET），查看控制臺。

    結(jié)果：控制臺啥也沒有輸出

    因為這樣寫是有問題的。所有需要修改一下。我先把我修改后的代碼貼出來。后面解釋

    <!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>添加數(shù)據(jù)</button>
    <table class="content" align="center">
        <tr>
            <th >課程名稱</th>
            <th >所屬學院</th>
            <th >已學會</th>
        </tr>
    </table>
    <script>
        $(function() {
            var t1 = $('<tr align="center"><td>javaScript</td><td>傳智播客-前端與移動開發(fā)學院</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>傳智播客-前端與移動開發(fā)學院</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>傳智播客-前端與移動開發(fā)學院</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>傳智播客-前端與移動開發(fā)學院</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.先點擊“添加數(shù)據(jù)”按鈕，把a標簽動態(tài)生成出來。

    • 2.再點擊a標簽（GET），查看控制臺。

    **結(jié)果：控制臺開始輸出了 **

    開始作解釋了。其實大家可以看出來，這里只有一個區(qū)別。我把這兩個貼出來

    // 控制臺不輸出
// 通過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獲取不到動態(tài)添加元素的。

    方案解釋：

    on雖然可以給未來動態(tài)創(chuàng)建的元素綁定事件，但是要先獲取已擁有的父級元素。然后才能再獲取動態(tài)元素。

    就是相當于說，給父元素添加一個事件（該事件類型和動態(tài)元素想要實現(xiàn)的事件類型一樣）

    所以這里可以得到：

        <table class="content" align="center">
        <tr>
            <th >課程名稱</th>
            <th >所屬學院</th>
            <th >已學會</th>
        </tr>
 
// 動態(tài)添加的元素
        <tr align="center">
            <td>javaScript</td>
            <td>傳智播客-前端與移動開發(fā)學院</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();
})

    只要記住，在動態(tài)生成的元素中，不能直接指定其事件。只能其父標簽的事件后，過濾指定特定元素事件。

    還有一種寫法:直接指定dom的元素事件。這也是可以的。

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

    關(guān)于“jQuery動態(tài)添加元素后元素注冊事件失效如何解決”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“jQuery動態(tài)添加元素后元素注冊事件失效如何解決”知識都有一定的了解，大家如果還想學習更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。

    向AI問一下細節(jié)

    免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

    AI
    助
    手