最近做項目的時候遇見了一個問題，通過jq將動態節點綁定到dom節點上，並且為動態節點綁定方法，此方法再次為動態節點添加動態節點，但在刷新之后，動態節點上的方法失效了，過程為：創建動態節點->動態節點綁定方法->添加動態節點->刷新后點擊動態節點方法失效。
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="liData">
</div>
</body>
</html>
1、首先通過ajax獲取到管理員管理多少個班級
-------------------
| 班級1 |
-------------------
| 班級2 |
-------------------
| |
| |
| |
| |
| |
| |
-------------------
...ajax
success: function (res) {
for (i = 0; i < res.data.length; i++) {
var collegeList = '<ul class="......">' +
'<li class="......">' +
'<a class="......" onclick="getPro(\''+res.data[i].ID+'\')">' + res.data[i].FullName + '</a>' +
'<div class="......" id="' + res.data[i].ID + '">' +
'</div>'
'</li>' +
'</ul>';
$("#liData").append(collegeList);
}
......
2、點擊對應班級添加班級學生
--------------------
| 班級1(active) |
--------------------
| 學生1 |
| 學生2 |
| 學生3 |
| 學生4 |
| 學生... |
-------------------
| 班級2 |
| |
--------------------
Function getPro(id){
...ajax
success: function (ress) {
for (j = 0; j < ress.data.length; j++) {
var list = '<li class="...... ">' +
'<a class="......">' +
'<p class="......">姓名：' + ress.data[j].StudentName + '</p>' +
'<p class="......">學號：' + ress.data[j].StudentID + '</p>' +
'<p class="......">性別：' + ress.data[j].Sex + '</p>' +
'<p class="......">院系：' + ress.data[j].College + '</p>' +
'<p class="......">專業：' + ress.data[j].ProfessionalName + '</p>' +
'<p class="......">班級：' + ress.data[j].OrganName + '</p>' +
'</a>' +
'</li>';
$("#" + id+ "").append(list);
}
}
}
......
3、刷新后會發現，點擊班級加載不出學生來，於是采用同步加載的方式勉強實現
...ajax
success: function (res) {
for (i = 0; i < res.data.length; i++) {
var OrganID = res.data[i].ID;
var collegeList = '<ul class="......">' +
'<li class="mui-table-view-cell mui-collapse">' +
'<a class="......">' + res.data[i].FullName + '</a>' +
'<div class="......" id="' + res.data[i].ID + '">' +
'</div>'
'</li>' +
'</ul>';
$("#liData").append(collegeList);
$.ajax({
......
async: false,//同步，但並非好辦法
success: function (ress) {
for (j = 0; j < ress.data.length; j++) {
var list = '<li class="...... ">' +
'<a class="......" onclick="showInfo(' + ress.data[j].StudentID + ')">' +
'<p class="......">姓名：' + ress.data[j].StudentName + '</p>' +
'<p class="......">學號：' + ress.data[j].StudentID + '</p>' +
'<p class="......">性別：' + ress.data[j].Sex + '</p>' +
'<p class="......">院系：' + ress.data[j].College + '</p>' +
'<p class="......">專業：' + ress.data[j].ProfessionalName + '</p>' +
'<p class="......">班級：' + ress.data[j].OrganName + '</p>' +
'</a>' +
'</li>';
$("#" + OrganID + "").append(list);
}
}
})
}
}
4、網上找了很多解決方案，學習了委托,其作用在於
1）提高性能
對於多個相同的操作，如果足一操作，會影響性能
2）重復事件
新添加了元素還要觸發之前的事件，而之前事件已經執行完，導致不再觸發(我的錯誤就屬於此類)
$("...").click(function(){
let list='<button class="btn">jq添加節點</button>';
$("...").append(list);
})
$("btn").click(function(){
//方法無效
})
$("父節點").on('click','button',function(){
//通過事件委托完成，有效
})
ps:當時很想明白我犯的錯誤的原理，但網上全是例子，沒有詳細說明原因，很是苦惱，最后找到一個講解比較詳細還很通俗易懂的帖子，分享給大家：
https://blog.csdn.net/a_csdner/article/details/76164986
小結：
$('...').bind('click',function(){
//這就是事件不委托，每個按鈕有自己的事件
})
$('#btn').delegate('.button','click',function(){
//這就是事件委托，
})
$('#btn').undelegate('.button','click')//取消綁定