Question

我这样尝试过：

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

但是我收到“未捕获的TypeError：无法读取未定义的属性'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/

Answer 1

Event.observe需要DOM元素或DOM元素的ID才能起作用。如果要将click事件侦听器绑定到一个或多个共享同一类名的元素的集合，则需要以不同的方式构造侦听器，或将唯一的侦听器绑定到共享该类名的每个元素。

执行此处描述的最简单的方法是将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。

此模式的好处是，您不必在页面中共享该类名的每个元素上绑定单独的观察者。只要您希望每个观察者都做相同的事情，一位观察者就可以处理任何数量的可观察元素。

如果您真的希望每个按钮都有一个单独的观察者，则可以为每个按钮赋予唯一的ID。如果这不切实际，则可以执行此操作（但不要这样做-当您仅对一个元素感兴趣时，为多个元素创建观察者是浪费的）：

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

Prototype中的“ double-dollar”方法使您可以使用类名或任何其他CSS选择器来标识页面上的元素集合。即使页面上只有一个返回的匹配元素，它也总是返回包含该元素的数组。这类似于jQuery看到DOM的方式，在Prototype 1.7及更高版本中，使用相同的Sizzle CSS选择器库来选择元素。

prototype.js-使用类

1 个答案: