TypeError：$（…）.on不是prototype.js的函數

Question

我想向窗體的子項的change事件添加一個過濾的偵聽器，但是我從$選擇器中得到了奇怪的結果。

我用形式為$（“ exportForm”）的ID調用選擇器，然后嘗試在其上調用.on（...）方法，從而得到有關錯誤的信息。

檢查返回的元素，我似乎找到了一個以數字作為ownProperties名稱的數組。 在控制台$（...）[1]中為它們建立索引將返回表單的單個子級。 在proto屬性中，似乎沒有選擇器應該添加的Prototype.js方法的痕跡。

怎么了？ 尋找什么才能使其正常工作？

PS：Prototype.js版本為1.6.1

Answer 1

你是對的。 on()是在1.7中添加的，因此您不能在此處使用它。 on方法給您帶來的是“惰性評估”。 你打電話時

$(document).on('eventName', 'css selector', function(){ ... });

...您得到的觀察者不必在頁面加載后初始化，也不必在頁面的某些部分被Ajax回調替換后初始化。 您可以替換頁面的一部分，然后再次單擊它，觀察者將開始工作。

建立觀察者的舊方法是：

$(document).observe('dom:loaded', function(){
  $('theId').observe('eventName', function(){
    // do something
  });
});

外層的觀察者會等到頁面加載完成，然后內層的觀察者會觀察某個事件的對象並對此進行處理。 只要DOM在加載后不發生變化，這將起作用。 如果發生這種情況，則您必須手動重新注冊內部偵聽器，因為其目標已更改，並且不再起作用。 第一次加載頁面本身時， dom:loaded事件僅觸發一次。

在您的情況下，您似乎想復制Prototype中Form.Element.Observer()類方法的行為，該方法對所有表單子元素設置定時輪詢，並在任何子元素發生更改時觸發回調。 您確實應該查看該方法的文檔，因為這是一種真正防彈的方式來執行您要嘗試的操作。 但是，如果您真的想自己滾動，可以按照以下方法編寫觀察器，以偵聽多個元素上的事件：

$(document).observe('dom:loaded', function(){
  $$('#exportForm input').invoke('observe', 'change', function(evt, elm){
    // evt is the event itself, you can cancel, log, whatever
    // elm is a reference to the form element, you can do elm.getValue(), etc.
  });
});

這使用“雙美元”方法獲取元素數組，因此將捕獲ID為exportForm的表單內的任何表單輸入。

invoke()對元素數組應用相同的回調和參數，因此這將為每個表單元素設置一個單獨的observe方法-如果您有很多輸入，效率就不高！ 您可以嘗試偵聽表單本身上的change事件，因此只有一個觀察者方法，但是根據您需要支持的瀏覽器，您可能會發現這些事件並不總是從單個表單輸入一直冒泡。表單本身。 您必須仔細測試。

觀察到的每個表單元素都將單獨顯示：您將無法從回調中訪問其余的表單輸入。

這就是Form.Element.Observer如此強大的原因-每次啟動時，它都會為您提供整個表單的哈希，因此您可以執行諸如頻繁創建預覽或驗證之類的操作，以使其看起來“實時”。