如何正确设置 jQuery 动态事件处理程序？

Question

我还是一个初学者，我尝试在动态 html 表中的<td> 中的类型（文本）输入上设置动态事件处理程序，代码如下：

for(var i=0; i<5; i++){
    table += '<td><input type="text" name="vote['+i+']"></td>';
    $("#table").on("keyup", "input[type='text'][name='vote["+i+"]']", function() {
        console.log("called: "+i);
        calculate(i);
    });
}

它没有工作。 i 的值（如console.log 中显示的那样）不是应有的值，即依次为0 到4，但始终为5。但在其他地方，我使用了类似下面示例中的模式，并且它有效。

$.each(array_parties, function(i, objParty) {
    var stationID = objStation.stationID;
    var partyID = objParty.partyID;
    table += '<td><input type="text" name="items['+stationID+']['+partyID+']"></td>';
    $("#table").on("keyup", "input[type='text'][name='items["+stationID+"]["+partyID+"]']", function() {
        calculateTotalByParty(json, partyID, khumID);
    });
});

请，有人可以帮助找出这里的问题吗？快把我逼疯了。

Answer 1

它形成了一个闭包。因此，只需将您的点击处理程序包含在一个自执行函数中，该函数会创建一个新范围。

问题是：由于 JavaScript 中的变量具有函数级作用域，因此您的循环每次都会覆盖“i”。因此，我们可以通过创建一个新作用域的匿名函数来避免这种情况。

for(var i=0; i<5; i++){
(function(j){
   table += '<td><input type="text" name="vote['+j+']"></td>';
   $("#table").on("keyup", "input[type='text'][name='vote["+j+"]']", function(){
         console.log("called: "+j);
         calculate(j);
    });
})(i)
}

举个例子：

问题：https://jsfiddle.net/sandenay/ar5f5m4t/

解决方案：https://jsfiddle.net/sandenay/m5p8740w/

Answer 2

没有循环也可以正常工作

$("#table").on("keyup", "input[type='text'][name^='vote']", function() {
        console.log("called: "+i);
        calculate(i);
    });

Answer 3

我有一个不同的棘手方法：

$(function(){

   //First, just build the table AND SAVE THE iterator in an tag atribute
   var table = "<tr>";
   for(var i=0; i<5; i++){
      table += '<td><input type="text" name="vote['+i+']" data-id="'+i+'">   </td>';
   }
   table += "</tr>";
   $("#table").html(table);

   // On event 'keyup', get the iterator saved in attrbute ( data-id ) and use it :)
   $("#table").on("keyup", "input[type='text']", function() {
     var i = $(this).attr("data-id");
     calculate(i);
   });

});

function calculate(i){
    console.log("Called to: "+i);
}

接下来，您可以将 building-html 函数（.html()）与事件函数（'keyup'）分开。

Working jsfiddle