多个元素上的动态绑定处理程序将只调用最后一个绑定函数

Dynamically bond handler on multiple elements will call only last bond function

本文关键字：调用 最后一个 函数 绑定 程序 处理 元素 动态绑定      更新时间：2023-09-26

http://jsfiddle.net/7CV88/8/

在这个片段中，我尝试将change绑定到#r(Nth)e<input>元素，以更改#r(N+1th)s<input>元素的内容。但是，当我更改任何第N个<input>元素时，显示的消息总是"#r(最后N个(e更改处理程序">

for(var i = 1; i < numRanges; i++){
    $('#r'+i+'e').change(function(){
        $('#messages').html('#r'+i+'e change handler');
        $('#r'+(i+1)+'s').val($('#r'+i+'e').val());
    });
}

您应该使用所谓的事件数据将i的值传递到onchange事件处理程序：

for(var i = 1; i < numRanges; i++){
  $('#r'+i+'e').change(i, function(e){
     $('#messages').html('#r'+e.data+'e change handler');
     $('#r'+(e.data+1)+'s').val($('#r'+e.data+'e').val());
  });
}

更新的演示

注意：这只是直接回答您提出的问题，我知道您的代码很乱，修复它不是主要的事情。

这是一个典型的"闭包"问题。

我正在尝试最简单的方法来解决关闭问题，所以我提出了这个错误的方法：

for(var i = 1; i < numRanges; i++){
    $('#r'+i+'e').change(function(){
        var tempVariable = i;
        $('#messages').html('#r'+tempVariable +'e change handler');
        $('#r'+(tempVariable +1)+'s').val($('#r'+tempVariable +'e').val());
    });
}

多亏了metadings，我意识到了我的错误，所以我根据他们的建议创建了一个演示来测试：

var list = $("div");
for(var i = 0; i < list.length; i++){
    $(list[i]).click((function(x){
        return function(){alert(x);};
    })(i));
}

http://jsfiddle.net/9qBXn/

HTH

相关文章：