Dynamic JavaScript onclick

Dynamic JavaScript onclick

本文关键字：onclick JavaScript Dynamic      更新时间：2023-09-26

我遇到了一个lil问题。我想创建带有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会处理按值调用？也许还有更好的解决方案？

编辑：

$只是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岁的时候，函数会被调用。但那个问题并不是我真正问题的一部分。appendChild就是解决方案。真正的应用程序现在正在正常工作。

谢谢女士们：）

在执行选择器代码时，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);
}
相关文章：