动态JavaScript onclick

我有个小问题。我想创建带有onclick的JavaScript按钮，但它不起作用。以下是与我的问题相匹配的lil代码：

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

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

任何人都知道什么是不起作用的，我以为JavaScript会使用按值调用？也许还有更好的解决办法

编辑：

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

编辑2：

问题似乎是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岁时被调用。但那个问题不是我真正的问题。这个孩子就是解决办法。真正的应用程序现在正在正常工作

谢谢女士们：

在执行选择器代码时，for循环将结束，您需要一个闭包

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

   (function(i) {
       document.getElementById("btn" + i).onclick = function (i) {
           alert(i);
       };
   })(i);
}

Asuming$是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);
}

---

美元是多少？什么不起作用？你确定你没有错过$'menu'或$'btn'+i中的功能吗？好的，我明白这是一个范围问题。虽然那个代码给了我几乎相同的问题。只有最后一个按钮在执行操作。@user1900980:无论何时使用.innerHTML+=，您都在销毁和重新创建现有的DOM元素。以前绑定的事件处理程序将丢失。您不应该使用innerHTML，而应该使用其他DOM操作方法，例如appendChild。appendChild帮助我使所有按钮都正常工作，但我得到的所有三个按钮的值都相同。这里的第一个问题不是append，而是appendinnerHTML删除了eventListeners。