javascript - 使用JS事件委托无法生效-PHP中文网问答

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>
<p 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>
</p>
<p id="content">
</p>
<script>

  var cont = document.getElementById("content");
  var num = document.getElementById("num-input");
  var fap = document.getElementById("father");
  var createEle = document.createElement("p");
  var inputText = num.value;
  var createText = document.createTextNode(inputText);
  fap.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>