javascript - 使用JS事件委托无法生效
本文介绍了javascript - 使用JS事件委托无法生效的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
1.使用事件委托只能生效一次,后续点击没反应,再次点击左侧添加或者右侧添加无任何报错也没有任何反应
2.代码:
<!DOCTYPE html>
<html>
<head>
<title>js6</title>
<meta charset="utf-8">
<style type="text/css">
p {
display: inline-block;
color: #fff;
background-color: red;
margin: 0 5px;
padding: 5px;
}
</style>
</head>
<body>
<div id="father">
<input id="num-input" type="text" name="inputBox">
<button id="add-left" type="button" >左侧添加</button>
<button id="add-right" type="button" >右侧添加</button>
<button id="del-left" type="button" >左侧删除</button>
<button id="del-right" type="button" >右侧删除</button>
</div>
<div id="content">
</div>
<script>
var cont = document.getElementById("content");
var num = document.getElementById("num-input");
var fadiv = document.getElementById("father");
var createEle = document.createElement("p");
var inputText = num.value;
var createText = document.createTextNode(inputText);
fadiv.onclick = function (e) {
var e = e || window.e;
var target = e.target || e.srcElement;
if (target.nodeName.toLowerCase() == "button") {
switch(target.id){
case "add-left" :
createEle.appendChild(createText);
var firstNode = cont.firstElementChild;
cont.insertBefore(createEle,firstNode);
break;
case "add-right" :
createEle.appendChild(createText);
var firstNode = cont.firstElementChild;
cont.appendChild(createEle);
break;
case "del-left" :
var firstNode = cont.firstElementChild;
cont.removeChild(firstNode);
break;
case "del-right" :
var lastNode = cont.lastElementChild;
cont.removeChild(lastNode);
break;
}
}
}
</script>
</body>
</html>
解决方案
你创建的这些元素都在onclick外面，那元素就创建一次啊，一直append、insert同一个元素当然看起来是『没反应』的，你可以把创建元素的这些代码移到onClick里面就行啦
var createEle = document.createElement("p");
var inputText = num.value;
var createText = document.createTextNode(inputText);
这篇关于javascript - 使用JS事件委托无法生效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
