Блог

Я попробовал это так:

 Event.observe('.add_select_row', 'click', function() {
    console.log("KLICK!");
});
  

Но я получаю «Неперехваченную ошибку типа: не удается прочитать свойство ‘get’ неопределенного»

Я также пробовал:

 Event.observe('add_select_row', 'click', function() {
    console.log("KLICK!");
});
  

… и …

 Event.observe($('.add_select_row'), 'click', function() {
    console.log("KLICK!");
});
  

http://api.prototypejs.org/dom/Event/observe/

Для работы Event.observe требуется элемент DOM или идентификатор элемента DOM. Если вы хотите привязать прослушиватель событий щелчка к коллекции из одного или нескольких элементов, имеющих одинаковое имя класса, тогда вам нужно по-другому сконструировать свой прослушиватель или привязать уникальный прослушиватель к каждому элементу, имеющему это имя класса.

Самый простой способ сделать то, что вы описываете здесь, — добавить идентификатор к элементу, который вы хотите прослушать. Если вы не можете этого сделать, вы можете переписать своего слушателя, чтобы он отвечал на другом уровне:

 $(document).observe('click', '.add_select_row', function(evt, elm){
  // evt is now bound to the click event, so you could keep it from bubbling:
  evt.stop();
  // elm is now bound to the element with the classname add_select_row
  // that triggered the click, so you can do something with that
  elm.addClassName('clicked');
  console.log('CLICK');
});
  

Этот шаблон известен как «ленивый наблюдатель», который использует тот факт, что события щелчка всплывают и в конечном итоге перехватываются самим документом. Вы также не ограничены использованием документа для этого. Вы также можете установить такого рода наблюдателя для любого родительского элемента кнопки, например:

 $('foo').on('click', '.add_select_row', function(evt, elm){});
  

если у вас был div#foo на каком-то уровне предка для этой кнопки.

Преимущество этого шаблона в том, что вы не получаете отдельного наблюдателя, привязанного к каждому элементу на вашей странице, который разделяет это имя класса. Один наблюдатель будет работать для любого количества наблюдаемых элементов, если вы хотите, чтобы каждый из них делал одно и то же.

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

 $$('.add_select_row').each(function(elm){
  elm.observe('click', function(evt){
    console.log('CLICK');
  });
});
  

Метод «двойной доллар» в Prototype позволяет использовать имена классов или любой другой CSS-селектор для идентификации коллекции элементов на странице. Даже если на странице есть только один возвращаемый соответствующий элемент, он всегда возвращает массив, содержащий этот элемент. Это похоже на то, как jQuery видит DOM, а в Prototype 1.7 и выше использует ту же библиотеку Sizzle CSS selector для выбора элементов.