Question

我遇到了一个小问题。我想用onclick创建JavaScript按钮，但它不起作用。这是一个匹配我的问题的代码：

for (var i = 0; i < 3; i++) {
  $('menu').innerHTML += '<button id="btn' + i + '">Button' + i + '</button>';
  $('btn' + i).onclick = function (i) {
    alert(i);
  };
}

真实情况有点复杂。它是谷歌玻璃等设备的小型网络应用程序。导航是通过语音进行的，但出于支持目的，如果我们使用普通浏览器输入按钮，我们必须在网站上显示按钮。

任何人都知道什么不起作用，我认为JavaScript会使用call-by-value？也许甚至有更好的解决方案？

编辑：

$ ist只返回document.getElementById，这应该没有＃。按钮已创建，最后一个按钮正在工作。这就是为什么我说我认为它适用于引用调用导致我似乎一旦我更改了i的名称它正在改变onclick，这是我能想到为什么只有最后一个工作的唯一原因。 / p>

EDIT2：

看起来问题是innerHTML + =删除了eventListeners。所以我修复了这个问题，但我仍然无法传递参数。我的小说看起来像这样：

for (var i = 0; i < 3; i++) {
  var btn = document.createElement('button');
  btn.setAttribute('id', 'btn' + i);
  var btnText = document.createTextNode('Button' + i);
  $('menu').appendChild(btn);
  $('btn' + i).appendChild(btnText);
  $('btn' + i).onclick = function () {
    alert(i);
  }
}

好的问题似乎是当我3岁时函数被调用。但是这个问题不是我真正问题的一部分。 appendChild是解决方案。真正的应用程序现在正在运行。

谢谢女士：）

Answer 1

假设$是jQuery：

var menu = $('menu')
for (var i = 0; i < 3; i++) {
  $('<button id="btn' + i + '">Button' + i + '</button>').on('click', (function (j) {
    // Created a closure here, that has access to the original i as j.
    alert(j);
  })(i)).appendTo(menu);
}

动态JavaScript onclick

1 个答案: