Ошибка типа: $ (...). On не является функцией с prototype.js

Question

Я хочу добавить отфильтрованный слушатель к событию изменения дочерних элементов формы, но я получаю странные результаты от $ selector.

Я вызываю селектор с идентификатором формы $ ("exportForm") и пытаюсь вызвать для него метод .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 срабатывает только один раз, когда сама страница загружается в первый раз.

В вашем случае кажется, что вы хотите продублировать поведение метода класса Form.Element.Observer() в Prototype, который устанавливает синхронизированный опрос всех дочерних элементов формы и вызывает обратный вызов при изменении любого из них. Вам действительно стоит взглянуть на документацию по этому методу, так как это действительно пуленепробиваемый способ сделать то, что вы пытаетесь сделать. Но на тот случай, если вы действительно захотите свернуть свои собственные, вот как вы бы написали наблюдателя, который мог бы прослушивать события для нескольких элементов:

$(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.
  });
});

При этом используется метод «двойного доллара» для получения массива элементов, поэтому вводится любая форма ввода внутри формы с идентификатором exportForm.

invoke() применяет те же функции обратного вызова и аргументы к массиву элементов, так что это настройка отдельного метода observe для каждого элемента формы - неэффективно, если у вас много входов! Вы можете попытаться прослушать событие change в самой форме, поэтому у вас есть только один метод наблюдателя, но в зависимости от браузеров, которые вам нужно поддерживать, вы можете обнаружить, что эти события не всегда всплывают из отдельных входных данных формы. до самой формы. Вам придется тщательно проверить.

Каждый наблюдаемый элемент формы будет рассматриваться изолированно: у вас не будет доступа к остальным входам формы из-за обратного вызова, только к этому.

Вот почему Form.Element.Observer является настолько мощным - он дает вам хэш всей формы при каждом запуске, так что вы можете делать такие вещи, как предварительный просмотр или валидацию на достаточно частой основе, чтобы отображаться "вживую".