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

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

  •  0
  • 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");
            }
        });
    }
    

    我的 欲望行动 如下所示:

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

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

    3 回复  |  直到 14 年前
        1
  •  6
  •   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 .

        2
  •  1
  •   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" />
    
        3
  •  0
  •   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 当专注于另一个的时候。