prototypejs - 为类创建按钮事件

Question

我试过这样的：

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

但我得到“Uncaught TypeError：无法读取属性'获取'未定义”

我也尝试过：

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