TypeError：this.element為null，Rails與Judge gem

Question

我正在使用Judge gem建立簡單的客戶端評估。

在我選擇對“模糊”運行驗證而不是單擊按鈕之前，一切工作都非常完美。

腳本：

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])而不是第一個崩潰的情況下崩潰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 。 index的值將是循環執行代碼時的期望值，並在循環退出后保持該值。 注意我們現在在blur處理程序中如何使用divs[index] 。

解決這個特定問題的方法是， blur事件處理程序函數是異步的，直到模糊事件發生（直到for循環退出並保留i的值）后，才會評估divs[i] 。在其最后一個值i == arrayLength - 1 。

這方面的更多信息： 在JavaScript中的for循環內調用異步函數

解決此問題的另一種方法是保存使用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(','));
      }
    });
  });
}

我選擇后一種解決方案，因為它更清潔。 只是想先解釋一下關閉的事情。