jQuery：试图绑定事件时错误地引用对象

Question

好的，有这样的问题...我试图减少验证字段所需的代码量。 在这种情况下，我创建了一个数组，其中包含我希望将事件绑定到的元素的ID。 像这样：

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

在一个循环然后我绑定的事件：

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

在绑定函数中上下文（$ 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'); 
         }; 
        } 
     }) 
     } 
    } 

Answer 2

我会建议花时间去浏览John Resig的教程Learning Advanced Javascript。它将帮助你解决这个问题，并且会让你更深入地理解Javascript。