前端：事件动态绑定原理和重复绑定问题
以下代码默认引入了jQuery。
如下：
<script type="text/javascript">
$(function(){
$("input").click(function(){
$("#addbtn").append("<input value='bbb' type='button'>");
$("#addbtn").on("click", "input", function(){
console.log("bbb");
});
});
});
</script>
<body>
<input value="aaa" type="button">
<div id="addbtn"></div>
</body>
每次点击aaa按钮会生成一个bbb按钮。若点击aaa两次，生成了2个bbb按钮，则每次点击bbb按钮一下会打印2次"bbb"。
若js改成：
$(function(){
$("input").click(function(){
$("#addbtn").append("<input value='bbb' type='button'>");
$("#addbtn input").on("click", function(){
console.log("bbb");
});
});
});
或者
$("input").click(function(){
$("#addbtn").append("<input value='bbb' type='button'>");
$("#addbtn input").click(function(){
console.log("bbb");
});
});
每次点击aaa按钮会生成一个bbb按钮，若生成2个bbb按钮，则每次点击第一个bbb按钮一下会打印2次"bbb"，每次点击第二个bbb按钮一下会打印1次"bbb"。以上两种方式效果一样。
若js改成：
把bbb按钮click事件函数绑定代码放到aaa按钮click点击事件函数外面。
$(function(){
$("input").click(function(){
$("#addbtn").append("<input value='bbb' type='button'>");
});
$("#addbtn").on("click", "input", function(){
console.log("bbb");
});
});
每次点击aaa按钮会生成一个bbb按钮，无论生成几个bbb按钮，每次点击任意一个bbb按钮都只会打印1次"bbb"。
再看以下js：
$(function(){
$("input").click(function(){
$("#addbtn").append("<input value='bbb' type='button'>");
$("#addbtn").unbind("click");//或$("#addbtn").off("click");
$("#addbtn").on("click", "input", function(){
console.log("bbb");
});
});
});
每次点击aaa按钮会生成一个bbb按钮，无论生成几个bbb按钮，每次点击任意一个bbb按钮都只会打印1次"bbb"。
说明$("#addbtn").on("click", "input", function(){});这中绑定事件方式实际是把事件绑定到$("#addbtn")元素上，然后往下查找子元素里为$("input")的元素，以此来实现动态生成元素的事件绑定。
