Недавно Диу Цзян изучал 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:;" class="del">GET</a></td></tr>');
var t2 = $('<tr align="center"><td>css</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;">GET</a></td></tr>');
var t3 = $('<tr align="center"><td>html</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;">GET</a></td></tr>');
var t4 = $('<tr align="center"><td>jQuery</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;">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. Щелкните метку (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:;" class="del">GET</a></td></tr>');
var t2 = $('<tr align="center"><td>css</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;">GET</a></td></tr>');
var t3 = $('<tr align="center"><td>html</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;">GET</a></td></tr>');
var t4 = $('<tr align="center"><td>jQuery</td><td>传智播客-前端与移动开发学院</td><td><a href="javascript:;">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. Щелкните метку (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:;" 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");
})