时间戳

首页 > 解决方案 > 动态添加的功能无法正常工作 JavaScript

javascript - 动态添加的功能无法正常工作 JavaScript

问题描述

我正在尝试创建一个由用户输入组成的表格，这些输入包括复选框。我有一个功能可以在单击框时做什么

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，我还没有深入研究。

标签： javascriptfunctionhtml-tabledynamically-generated

解决方案

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

这里...

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

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

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

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

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

在该页面上搜索“匿名函数”

推荐阅读