动态添加的功能无法正常运行JavaScript

时间:2018-04-28 13:30:59

标签: javascript function html-table dynamically-generated

我尝试创建一个由用户输入构成的表,其中包括复选框。 我有一个功能,可以在单击框时执行操作

function checkTheBox(t)  {           
  var t;
    if (array[t] == 0) {
      array[t] = 1;
    }
    else {
      array[t] = 0;
    }
}

并将该函数添加到我使用的表的创建元素

function add() {
  var word = document.getElementById("text").value;
  var tdt = document.createElement("td");
  var tdc = document.createElement("td")
  var node = document.createTextNode(word);
  var checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.id = "cb";
    tdc.addEventListener("click", ticker(0), false);
    tdc.stopPropagation;
  tdt.appendChild(node);
  tdc.appendChild(checkbox);
  var tr = document.createElement("tr");
  tr.appendChild(tdt);
  tr.appendChild(tdc);
  var table = document.getElementById("vt");
  table.appendChild(tr);
}

问题在于,每当我点击“添加”按钮创建新元素时,它都会激活该功能,然后创建该元素,当我点击它时复选框不会执行任何操作。

我首先使用checkTheBox函数,因为我阅读处理复选框的唯一方法是使用PHP,我还没有深入研究。

1 个答案:

答案 0 :(得分:0)

您立即执行ticker(0),而不是在点击tdc时告诉它执行。

下面...

tdc.addEventListener("click", ticker(0), false);

这会将执行ticker(0)的结果分配给click事件处理程序。您可以将其包装在匿名函数中,以便以后执行...

tdc.addEventListener("click", function() { ticker(0); }, false);

请查看此处的文档以获取一些示例......

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

在该页面中搜索"匿名函数"