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

Question

我还是个初学者，我尝试在动态 html table 中对 <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);
}

然后，您可以将构建-html 函数（.html()）与事件函数（'keyup'）分开。

Working jsfiddle

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

How to set up jQuery dynamic event handlers properly?

jquery

loops

dynamic

event-handling