代码之家 › 专栏 › 技术社区 › A.N.M. Saiful Islam

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

bind events forms jquery javascript

A.N.M. Saiful Islam · 技术社区 · 14 年前

HTML:

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

JavaScript:

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

我的 欲望行动 如下所示:

当我将光标放在上面的任何字段上时,输入字段的边框将是红色的。
当我从字段中取出光标时,它的边框将是黑色的。

但事情是 仅对密码文件发生 是否放置并取下光标窗体 上述任何字段 .

3 回复 | 直到 14 年前

Christian C. Salvadó 14 年前

这是一个 很常见的问题 , 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 .

Ken Redler 14 年前

这工作:

$('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" />

Kent 14 年前

另外一个可以改进代码的注释。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 当专注于另一个的时候。