场景：因为js都是dom操作，所以如果动态创建一个元素的话，本身是不带自身事件的，因为在创建这个元素前，dom已经创建完成了，所以在动态创建出来的元素身上不包含事件
所以我们需要给这些动态创建出来的元素身上添加上你想要添加的事件
代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>给动态创建出来的元素加事件</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
span{margin:100px 10px 20px 150px;width:200px;border:1px solid #666;display:block;cursor:pointer;}
div{margin-left:150px;width:500px;height:300px;border:1px solid #666;}
</style>
</head>
<body>
<span>动态添加元素</span>
<div></div>
</body>
</html>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('span').click(function(){
$('div').append('<a class="btn" href="javascript:;">我是动态添加的a元素</a>')
});
// $(document).on("click", ".btn", function() {//方法一
// console.log('事件添加成功')
// });
$("div").delegate(".btn","click", function() {//方法二，这是一个事件委托方法，是给页面开始加载欠就存在的元素加
console.log('事件添加成功')
});
});
</script>版权声明：本文为qq_17211063原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。