版权声明：如有侵权，请联系[email protected]。 https://blog.csdn.net/cs373616511/article/details/80576751
on()方法
语法：$(selector).on(event,childSelector,data,function,map)
继jQuery1.7之后，on()方法替代了bind(), live() 和 delegate() 方法。on()方法可以给当前元素和未来元素绑定事件。
childSelector项是可选的，如果没有childSelector项的话，只能给被选元素（已存在的元素）绑定事件，不能给未来元素
（后续动态生成的元素）绑定事件；
效果图：
点击添加html然后点击div弹出alert，说明方法正确执行
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<script type="text/javascript" src="js/jquery-1.10.2/jquery.min.js"></script>
</head>
<body>
<button id="btn">添加html</button>
<div style="width: 100px;height: 100px;background-color: yellow;" id="div"></div>
<script type="text/javascript">
$(function() {
//正确的方式
$("#div").on("click", ".demo", function() {
alert("ok");
});
//错误的方式
/*$("#div .demo").on("click", function() {
alert("ok");
});*/
$("#btn").click(function() {
var html = '<div class="demo" style="width: 100px;height: 100px;background-color: greenyellow;" ></div>';
$("#div").html(html);
});
});
</script>
</body>
</html>