jQuery動(dòng)態(tài)添加元素后元素注冊(cè)事件失效解決
更新時(shí)間：2022年08月12日 17:11:57 作者：DIUDIUjiang
這篇文章主要介紹了jQuery動(dòng)態(tài)添加元素后元素注冊(cè)事件失效解決，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
前言：
近日丟醬在學(xué)jQuery，在學(xué)習(xí)的時(shí)候遇到了一個(gè)問題，雖然最后解決了，但是丟醬覺得要把這個(gè)問題解決的方法記錄下來(lái)，這樣有小伙伴遇到同樣的問題就不會(huì)跟我一樣解決好久啦。
我先貼一段正常邏輯的代碼
<!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 style="font-weight: 700;">課程名稱</th>
<th style="font-weight: 700;">所屬學(xué)院</th>
<th style="font-weight: 700;">已學(xué)會(huì)</th>
</tr>
</table>
<script>
$(function() {
var t1 = $('<tr align="center"><td>javaScript</td><td>傳智播客-前端與移動(dòng)開發(fā)學(xué)院</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>傳智播客-前端與移動(dòng)開發(fā)學(xué)院</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>傳智播客-前端與移動(dòng)開發(fā)學(xué)院</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>傳智播客-前端與移動(dòng)開發(fā)學(xué)院</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>前端頁(yè)面操作流程：
- 1.先點(diǎn)擊“添加數(shù)據(jù)”按鈕，把a(bǔ)標(biāo)簽動(dòng)態(tài)生成出來(lái)。
- 2.再點(diǎn)擊a標(biāo)簽（GET），查看控制臺(tái)。
結(jié)果：控制臺(tái)啥也沒有輸出
因?yàn)檫@樣寫是有問題的。所有需要修改一下。我先把我修改后的代碼貼出來(lá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 style="font-weight: 700;">課程名稱</th>
<th style="font-weight: 700;">所屬學(xué)院</th>
<th style="font-weight: 700;">已學(xué)會(huì)</th>
</tr>
</table>
<script>
$(function() {
var t1 = $('<tr align="center"><td>javaScript</td><td>傳智播客-前端與移動(dòng)開發(fā)學(xué)院</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>傳智播客-前端與移動(dòng)開發(fā)學(xué)院</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>傳智播客-前端與移動(dòng)開發(fā)學(xué)院</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>傳智播客-前端與移動(dòng)開發(fā)學(xué)院</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>前端頁(yè)面操作流程：
- 1.先點(diǎn)擊“添加數(shù)據(jù)”按鈕，把a(bǔ)標(biāo)簽動(dòng)態(tài)生成出來(lái)。
- 2.再點(diǎn)擊a標(biāo)簽（GET），查看控制臺(tái)。
**結(jié)果：控制臺(tái)開始輸出了 **
開始作解釋了。其實(shí)大家可以看出來(lái)，這里只有一個(gè)區(qū)別。我把這兩個(gè)貼出來(lái)
// 控制臺(tái)不輸出
// 通過(guò)on事件委派來(lái)給tr里面的a標(biāo)簽添加點(diǎn)擊事件
$('tr').on('click', 'a', function() {
console.log(11);
$(this).parents('tr').remove();
})；
// 控制臺(tái)輸出
$('.content').on('click', 'a', function() {
console.log(11);
$(this).parents('tr').remove();
})；第一個(gè)里，我們是事件委派對(duì)a標(biāo)簽的元素作單擊事件。但是這種jquery獲取不到動(dòng)態(tài)添加元素的。
方案解釋：
on雖然可以給未來(lái)動(dòng)態(tài)創(chuàng)建的元素綁定事件，但是要先獲取已擁有的父級(jí)元素。然后才能再獲取動(dòng)態(tài)元素。
就是相當(dāng)于說(shuō)，給父元素添加一個(gè)事件（該事件類型和動(dòng)態(tài)元素想要實(shí)現(xiàn)的事件類型一樣）
所以這里可以得到：
<table class="content" align="center">
<tr>
<th style="font-weight: 700;">課程名稱</th>
<th style="font-weight: 700;">所屬學(xué)院</th>
<th style="font-weight: 700;">已學(xué)會(huì)</th>
</tr>
// 動(dòng)態(tài)添加的元素
<tr align="center">
<td>javaScript</td>
<td>傳智播客-前端與移動(dòng)開發(fā)學(xué)院</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標(biāo)簽的父級(jí)
$('.content').on('click', 'a', function() {
console.log(11);
$(this).parents('tr').remove();
})只要記住，在動(dòng)態(tài)生成的元素中，不能直接指定其事件。只能其父標(biāo)簽的事件后，過(guò)濾指定特定元素事件。
還有一種寫法:直接指定dom的元素事件。這也是可以的。
$(document).on('click',"a",function(){
console.log("22");
})到此這篇關(guān)于jQuery動(dòng)態(tài)添加元素后元素注冊(cè)事件失效解決的文章就介紹到這了,更多相關(guān)jQuery添加元素內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- JQuery事件委托(適用于給動(dòng)態(tài)生成的腳本元素添加事件)
- Jquery 動(dòng)態(tài)添加元素并添加點(diǎn)擊事件實(shí)現(xiàn)過(guò)程解析
- jQuery實(shí)現(xiàn)為動(dòng)態(tài)添加的元素綁定事件實(shí)例分析
- jQuery動(dòng)態(tài)添加元素?zé)o法觸發(fā)綁定事件的解決方法分析
- jQuery如何獲取動(dòng)態(tài)添加的元素
- jQuery給動(dòng)態(tài)添加的元素綁定事件的方法
- Jquery對(duì)新插入的節(jié)點(diǎn) 綁定Click事件失效的解決方法
- jquery動(dòng)態(tài)添加元素事件失效問題解決方法
相關(guān)文章
jQuery 錨點(diǎn)跳轉(zhuǎn)滾動(dòng)條平滑滾動(dòng)一句話代碼
jQuery 錨點(diǎn)跳轉(zhuǎn)滾動(dòng)條平滑滾動(dòng)一句話代碼,需要的朋友可以參考下。2010-04-04
動(dòng)態(tài)設(shè)置form表單的action屬性的值的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇?jiǎng)討B(tài)設(shè)置form表單的action屬性的值的簡(jiǎn)單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
jQuery實(shí)現(xiàn)簡(jiǎn)單滾動(dòng)動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單滾動(dòng)動(dòng)畫效果的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-04-04
jQuery實(shí)現(xiàn)下滑菜單導(dǎo)航效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)下滑菜單導(dǎo)航效果代碼,通過(guò)jquery操作鼠標(biāo)事件及頁(yè)面樣式動(dòng)態(tài)操作實(shí)現(xiàn)下滑菜單導(dǎo)航功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
jquery中的sortable排序之后的保存狀態(tài)的解決方法
其實(shí)在前年的這個(gè)時(shí)候，我就有用過(guò)這個(gè)sortable組件，那時(shí)候搞了個(gè)個(gè)人網(wǎng)站（可惜后來(lái)關(guān)了），首頁(yè)就用到了這種拖拽的效果。2010-01-01
jQuery新的事件綁定機(jī)制on()示例應(yīng)用
從jQuery1.7開始，jQuery引入了全新的事件綁定機(jī)制，on()和off()兩個(gè)函數(shù)統(tǒng)一處理事件綁定，下面通過(guò)示例為大家介紹下2014-07-07
在網(wǎng)頁(yè)客戶端，我們經(jīng)常會(huì)遇到讀取或者設(shè)置cookie的情況，如果用純生的js我們可能會(huì)遇到一些兼容性帶來(lái)的麻煩，這里給大家介紹一個(gè)比較實(shí)用jquery操作cookie的插件2014-01-01
jquery中獲取select選中值的代碼，需要的朋友可以參考下。2011-06-06
jQuery針對(duì)input的class屬性寫了多個(gè)值情況下的選擇方法
這篇文章主要介紹了jQuery針對(duì)input的class屬性寫了多個(gè)值情況下的選擇方法,結(jié)合實(shí)例形式對(duì)比分析了jQuery選擇器針對(duì)class屬性中有多個(gè)值情況下的選中方法,需要的朋友可以參考下2016-06-06
jQuery實(shí)現(xiàn)文本框郵箱輸入自動(dòng)補(bǔ)全效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)文本框郵箱輸入自動(dòng)補(bǔ)全效果，大家無(wú)需輸入完全部郵箱信息，感興趣的小伙伴們可以參考一下2015-11-11