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

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

3 个答案: