prototypejs - создать событие click для кнопки с классом - PullRequest
Новая
       48

prototypejs - создать событие click для кнопки с классом

0 голосов
/ 12 апреля 2019

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

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

Но я получаю "Uncaught TypeError: Невозможно прочитать свойство 'get' of undefined"

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

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

... и ... 

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

enter image description here

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

1 Ответ

2 голосов
/ 12 апреля 2019

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

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

$(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 и выше использует ту же библиотеку селектора CSS Sizzle для выбора элементов.

...