<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="val" type="text" />
<input id="add" type="button" value="添加" />
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
$('#add').click(function () {
var tag = document.createElement('li');
var v = $('#val').val();
$(tag).text(v);
$('ul').append(tag);
});
// //第一种常见绑定方式，也是最常用的
// $('li').click(function () {
// alert($(this).text());
// });
// //第二种绑定方式 bind有与之对应的unbind
// $('li').bind('click',function () {
// alert($(this).text());
// });
//第三种绑定方式,功能很强大，可以让之后新添加的标签也有单击事件
$('ul').delegate('li','click',function () {
alert($(this).text());
});
// //第四种绑定方式 on 其实以上三种方式都是通过包装on实现的
// $('li').on('click',function () {
// alert($(this).text());
// });
</script>
</body>
</html>