溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了jQuery動態添加元素后元素注冊事件失效如何解決的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇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 >課程名稱</th>
<th >所屬學院</th>
<th >已學會</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 >課程名稱</th>
<th >所屬學院</th>
<th >已學會</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 >課程名稱</th> <th >所屬學院</th> <th >已學會</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動態添加元素后元素注冊事件失效如何解決”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
