javascript - jQuery:尝试绑定(bind)事件时对对象的错误引用

Question

好的，遇到这样的问题...我正在尝试减少验证字段所需的代码量。在本例中，我创建了一个数组，其中包含我想要将事件绑定(bind)到的元素的 id。像这样:

var fields = new Array('#edit-field-first-name', '#edit-field-last-name', '#edit-field-mobile');

然后我在循环中绑定(bind)事件:

for(var i = 0; i < fields.length; i++){
  if($('#user-profile-form ' + fields[i]).length > 0){
    var $obj = $('#user-profile-form ' + fields[i]);
    $obj.bind({
      blur :  function(){
                  if(!reg_chars.test($obj.val())){
                      $obj.css('border','1px solid #A14')
                          .parent().children('div.description').css('color', '#A14');
                  }else{
                      $obj.css('border-style','solid').css('border-color','#C5C3C3 #EDEDED #EDEDED #C5C3C3').css('border-width','1px')
                         .parent().children('div.description').css('color', '#333');
                  };
              }
    })
  }
}

现在奇怪的事情发生了。它正确触发“模糊”事件。但它始终引用数组中的最后一个元素。看起来它总是使用相同的对象，并且只是在每次循环迭代时覆盖它。

所以需要帮助......有什么解决方案吗？

Answer 1

绑定(bind)函数中上下文 ($obj) 赋值的问题。尝试更改为

    for(var i = 0; i < fields.length; i++){
      if($('#user-profile-form ' + fields[i]).length > 0){
        var $obj = $('#user-profile-form ' + fields[i]);
        $obj.bind({
          blur :  function(){
                      var $input = $(this);                      

                      if(!reg_chars.test($input.val())){
                          $input.css('border','1px solid #A14')
                              .parent().children('div.description').css('color', '#A14');
                      }else{
                          $input.css('border-style','solid').css('border-color','#C5C3C3 #EDEDED #EDEDED #C5C3C3').css('border-width','1px')
                             .parent().children('div.description').css('color', '#333');
                      };
                  }
        })
      }
    }