极客观点
项目管理
HarmonyOS
1.程序说明:给一个无序列表动态添加节点,绑定删除事件函数并调用;
2.调用删除事件1和事件2必须同时存在才能正常删除原有节点和新增节点;
3.很明显在触发点击添加之前删除事件1是不会触发的,所以刷新后直接点击删除按钮会执行删除事件2并alert(2);
4.但是刷新后点击添加按钮:
a.删除新增的节点，触发删除事件1并alert(1);
b.删除原有的节点，(--重点来了--)先触发删除事件2并alert(2)，然后多次触发删除事件1并alert(1);
5.如果将删除事件1注掉，无法删除新增的节点元素(找过各种答案，有说是用bind绑定的，有说必须$(document).on('click','button',function(){--something--});这样写的，还有说要绑定在父元素上的，也有说用委托事件的……)，然而并没有什么用；
6.如果将删除事件2注掉，很显然在点击新增按钮之前无法触发删除事件1，只有先新增节点后才能正常执行删除事件1；
所以，请教大神两个问题：
4.b多次触发删除事件1的原因；
如何正确给动态事件绑定点击事件；
代码如下：
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://code.jquery.com/jquery-latest.js"> </script>
</head>
<ul id='ul'>
<li><button class='btns'>删除</button></li>
<li><button class='btns'>删除</button></li>
<li><button class='btns'>删除</button></li>
<li><button class='btns'>删除</button></li>
<li><button class='btns'>删除</button></li>
</ul>
<button id="addLi">添加</button>
<body>
</body>
<script>
$(function(){
$('#addLi').click(function(){
$('#ul').append('<li><button class="btns">删除</button></li>');
dels(1); //删除事件1
});
//dels(2); //删除事件2
function dels(e){
$('.btns').bind('click','button',function(){
$(this).parent().remove();
alert(e);
});
}
});
</script>
jquery的click事件是叠加的。
var a = document.createElement("div");
a.innerHTML = "测试click";
$("body").append(a);
$(a).click(function(){console.log("第一个click事件")});
$(a).click(function(){console.log("第二个click事件")});
执行之后，点击标签，你会发现输出了两句话，而不是只输出第二句话。