javascript - 动态创建的js脚本onClick函数变量未绑定(bind)在当前值

Question

newButton.onclick = function() {
  launchForm(
    this, 
    incoming[(10 * (incoming.length / fields)) + z],
    incoming[(48 * (incoming.length / fields)) + z]);
};

因此，当我动态生成其中 4 个按钮时，这四个按钮中的每一个都会将第一个按钮的信息传递到函数 launchForm 中。我怀疑这是因为当变量 z 完成时，它的 for 语句会返回到 0。如果是这种情况，那么按钮 1 的 + z 为 + 1，按钮 2 的 + z 为 + 2，则它会变成 + z 为 + 0对于所有按钮。

我该如何解决这个问题？谢谢。

编辑:添加以响应更多信息的请求:

    var newButton = document.createElement('button');
    newButton.className = 'pure-button pure-button-primary mikeButton';
    newButton.innerHTML='Launch Form';
    newDiv4.appendChild(newButton);

所以我对这一切都很陌生，所以我可能使用了错误的术语。我的理解是，页面加载后创建的项目被认为是动态的。 --- 虽然我是新人，但我很有信心问题出在我最初提出的问题上。通过设置警报和测试，我可以看到第一个按钮完全按照预期工作，并且所有适当的参数都完美传递。只是按钮 2、3 和 4 也会启动按钮 1 启动的内容。 Incoming.length 不变，字段不变。与创建 newButton 的第一个实例到第二个实例时唯一不同的是 z。 --- 当我在创建第二个、第三个和第四个按钮后立即设置警报时，它们准确地显示应传递的参数。但在创建它们的函数完成后(基于使用 z 作为变量的 for 语句)，它们会转换回 z 为 0 的状态并使用按钮 1 的参数(因为在按钮 1 的争论中 z 等于 0)。我只是将 + 1、+2、+3 硬编码到代码中而不是 z，但创建的按钮数量取决于查询。有时是 1 个按钮，有时是 10 个按钮。所以这确实不是一个选择。

我希望这会有所帮助。

Answer 1

单击时所有处理程序都会引用 z 的当前值。我建议在定义时使用 z 的值

1. 通过调用 Function 作为构造函数来创建 onclick 处理程序，并计算正文字符串中 z 的当前值:

   newButton.onclick = new Function("launchForm(this, incoming[(10 * (incoming.length / fields)) + "+ z + "], incoming[(48 * (incoming.length / fields)) + " + z  + "]);");
   

2. 或者在创建 onclick 处理程序时将 z 值保存在按钮对象上:

   newButton["data-z"] = z;
   newButton.onclick = function() {....};
   

但在函数体中用“this['data-z']”替换对“z”的引用。