jquery事件绑定无法正常工作,或者我无法使其正常工作

这是一个 很常见的问题 , the field 在上访问的变量 focus 和 blur 事件属于外部作用域,因此它包含 最后 迭代值,在您的情况下,它将包含 "password" .

有很多方法可以解决这个问题,例如您可以使用 $.each 它引入了一个新的范围:

jQuery.each(["email", "password"], function(index, fieldId) {
  var field = $('#'+fieldId);

  field.bind({
    focus: function() {
      field.css("border-color","#f00");
    },
    blur: function() {
      field.css("border-color","#000");
    }
  });
});

或使用 $(this) 而不是 领域 在您的事件处理程序中,即:

var fields = ["email","password"];
for (var i = 0; i < fields.length; i++) {
    $("#"+fields[i]).bind({
        focus: function() {
            $(this).css("border-color","#f00");
        },
        blur: function() {
            $(this).css("border-color","#000");
        }
    });
}

_{主题外注释:在上面的示例中,我使用的是普通循环,而不是 for...in 语句,它并不真正用于类数组的对象。}

尝试两个代码示例 here .

这工作:

$('input#email, input#password').bind({
    focus: function() {
        $(this).css("border-color","#f00"); 
    },
    blur: function() {
        $(this).css("border-color","#000"); 
    }
});

如果问题中的错别字是真的,您可能还需要清除HTML:

<input id="email" name="email" type="text" />
<input id="password" name="password" type="password" />

另外一个可以改进代码的注释。jquery几乎通过迭代集来完成所有工作,因此不需要使用for循环手动迭代键列表。相反,您可以这样做:

$("#email, #password").bind({ // grab both elements at once
    focus: function() {
        $(this).css("border-color","#f00");
    },
    blur: function() {
        $(this).css("border-color","#000");
    }
});

注意,正如在CMS的例子中,我使用 this 以引用处理程序函数中的元素。 这 将引用触发事件的节点,因此 #email 在那个领域聚焦时,以及 #password 当专注于另一个的时候。