Question

我正在尝试动态地向我的项目添加事件。要添加多个事件的位置。很难描述项目的功能，所以我创建了一个非常简单的示例代码来演示我尝试创建的功能。我正在尝试创建多个事件侦听器来使用for循环，并且该事件侦听器的主体在其执行中使用for循环迭代器变量。但问题是，在所有事件侦听器中只使用for循环的最后一个值。请参阅下面的代码。

<script>
   function addlisteners() {
      var allinputs = document.body.getElementsByTagName("input");

      for ( var i = 0; i < allinputs.length; i++ ) {
          allinputs[i].onclick = function() {
          alert("hii, I am" + i + "input field");
          }
      }
  }
  window.onload = function() {
     for ( var i = 0; i < 10; i++ ) {
        var input = document.createElement("input");
        document.body.appendChild( input );
     }
     addlisteners();
 }
</script>
</head>

<body>
</body>

所以，如果代码被执行并尝试过，你会看到点击所有输入框会显示i的最后一个值，就像这样，“hii，我是10输入字段”。如果您知道如何以显示i的适当值的方式创建此事件处理程序，请回答。即;对于输入框1，“hii，我是1输入字段”，对于输入框2，“hii，我是2输入字段”，依此类推。非常感谢你的时间。

Answer 1

将您的代码段更改为

 allinputs[i].onclick = (function(x) {
        //alert("hii, I am" + j + "input field");
        return function(){
          alert("hii, I am" + x + "input field");
        }
  })(i);

FIDDLE，引自Here。

动态添加事件处理程序

1 个答案: