javascript - TypeError : this. 元素为空，Rails with Judge gem

Question

我正在使用 Judge gem 构建简单的客户端验证。

在我选择对“blur”而不是按钮点击运行验证之前，一切都很完美。

脚本:

var divs = ["advertisement_age","advertisement_weight","advertisement_region_id","advertisement_height","advertisement_name","advertisement_phone_number","Record_Start_Time",
"Record_End_Time","Record_Start_Time2","Record_End_Time2","advertisement_description", "advertisement_description_ru", "advertisement_terms_of_service"];

    var arrayLength = divs.length;
    var error_count =0;
    for (var i = 0; i < arrayLength; i++) {

     $(document.getElementById(divs[i])).blur(function(){

        judge.validate(document.getElementById(divs[i]), {  // This line causes error
                valid: function(element) {
                  element.style.border = '1px solid green';
                },
                invalid: function(element, messages) {
                  element.style.border = '1px solid red';
                 // alert(messages.join(','));

        }

        });

      });

    }

在 Mozzila Firebug 中，当我重新加载页面时没有任何错误消息。触发模糊事件时出现错误。

错误信息:

   TypeError: this.element is null

   this.attrValidators = root.JSON.parse(this.element.getAttribute('data-validate')...

我不明白为什么它在第二个 document.getElementById(divs[i]) 而不是第一个数组有效时崩溃？

有什么建议吗？

谢谢

Answer 1

问题是当 blur 事件触发时，for 循环已经退出并且 i 的值将被设置为for 循环退出时它到达的最后一个值。然后，最终，当 blur 事件触发时，judge.validate(document.getElementById(divs[i]) 将失败，因为 i 不是什么你期望的。解决它的一种方法是对 i 的值形成一个闭包:

for (var i = 0; i < arrayLength; i++) {
  (function(index) { // index is the current i value
    $(document.getElementById(divs[index])).blur(function() {
      judge.validate(document.getElementById(divs[index]), {
        valid: function(element) {
          element.style.border = '1px solid green';
        },
        invalid: function(element, messages) {
          element.style.border = '1px solid red';
          // alert(messages.join(','));
        }
      });
    });
  })(i); // pass i to the immediately executing anonymous function (closure)
}

所以我们将 $.blur 代码放在一个闭包中，并将 i 传入。在闭包中 i 将被称为 索引。 index 的值将是循环执行代码时的预期值，并在循环退出后保持该值。注意我们现在如何在 blur 处理程序中使用 divs[index]。

要解决这个特殊问题的是 blur 事件处理函数是异步的，在 blur 事件发生之前不会计算 divs[i]将在 for 循环退出并将 i 的值保留为其最后一个值 i == arrayLength - 1 后的某个时间。

这里有一些关于它的更多阅读:Calling an asynchronous function within a for loop in JavaScript

解决此问题的另一种方法是使用 document.getElementById(divs[i]) 保存找到的元素，然后在处理程序中使用 this:

for (var i = 0; i < arrayLength; i++) {
  var field = $(document.getElementById(divs[i]));
  field.blur(function() {
    judge.validate(this, { // `this` is the field element
      valid: function(element) {
        element.style.border = '1px solid green';
      },
      invalid: function(element, messages) {
        element.style.border = '1px solid red';
        // alert(messages.join(','));
      }
    });
  });
}

我会选择后一种解决方案，因为它更干净。只是想先解释一下闭包。