javascript - JS多个按钮绑定同一个事件无法生效-PHP中文网问答

1.通过循环为多个生成的按钮绑定同一事件,按钮绑定事件无法生效

2.代码:

<!DOCTYPE>
<html>
  <head>
    <meta charset="utf-8">
    <title>IFE JavaScript Task 01</title>
  </head>
<body>
  <p>
    <label>城市名称：<input id="aqi-city-input" type="text"></label><br>
    <label>空气质量指数：<input id="aqi-value-input" type="text"></label><br>
    <button id="add-btn" onclick="addBtnHandle()">确认添加</button>
  </p>
  <table id="aqi-table">
  </table>
 <script type="text/javascript">

var aqiData = [];

function addAqiData() {
    //获得城市和空气质量输入框值
    var city = document.getElementById("aqi-city-input").value;
    var num = document.getElementById("aqi-value-input").value;
    aqiData.push([city,num]);
    var ElementTable = document.getElementById("aqi-table")
    var ElementTr = document.createElement("tr");
    var ElementTdCity = document.createElement("td");
    var ElementTdNum = document.createElement("td");
    var ElementTdBtn = document.createElement("button");
    ElementTr.appendChild(ElementTdCity);
    ElementTr.appendChild(ElementTdNum);
    ElementTr.appendChild(ElementTdBtn);
    ElementTable.appendChild(ElementTr);
    var trLast = ElementTable.lastElementChild;
    trLast.children[0].innerHTML = city;
    trLast.children[1].innerHTML = num;
    trLast.children[2].innerHTML = "删除";
}

function renderAqiList() {
  //判断是否是第一个添加
  var ElementTable = document.getElementById("aqi-table");
  var ElementTableLength = ElementTable.childElementCount;
  if (ElementTableLength===0) {
    var ElementTr = document.createElement("tr");
    var ElementTdCity = document.createElement("td");
    var ElementTdNum = document.createElement("td");
    var ElementTdBtn = document.createElement("td");
    ElementTr.appendChild(ElementTdCity);
    ElementTr.appendChild(ElementTdNum);
    ElementTr.appendChild(ElementTdBtn);
    ElementTable.appendChild(ElementTr);
    var trFirst = ElementTable.getElementsByTagName("tr")[0];
    trFirst.children[0].innerHTML="城市";
    trFirst.children[1].innerHTML="空气质量指数";
    trFirst.children[2].innerHTML="操作";
  } 
}

function addBtnHandle() {
  renderAqiList();
  addAqiData();
  var ElementTable = document.getElementById("aqi-table");
  var ElementTableLength = ElementTable.childElementCount;
  alert(ElementTableLength);
  
  for (var i = 1; i < ElementTableLength; i++) {
      ElementTable.getElementsByTagName("tr")[i].lastElementChild.onclick = function () {
        aler("测试")
      };
      }
  }


</script>
</body>
</html>

var oTable=document.getElementById('yourTable'); oTable.addEventListener('click',function(e){ e.target=e.target||e.srcElement; if(e.target.nodeType===1&&e.target.nodeName==='TD'&&e.target.innerHTML==='删除'){ //删除该行 blablabla..... } })

全部回复(4)

高洛峰2017-04-11 09:49:17 4楼

你alert写错了