javascript - 如何为页面上找到的每个元素添加事件观察者？

Question

我正在使用 Prototype 脚本来检测 Div 下的所有选择标签，然后在每个标签上添加一个事件/观察者！

这是找到我需要的元素的代码：

Event.observe(window, 'load', function() {
  var tab=$("product-options-wrapper").descendants();
  var attCode=[];
  var j=0;

  for (i=0;i<tab.length;i++) {
    if (tab [i].tagName =="SELECT") {
      attCode[j++]=tab[i].id
    }
  }
});

我有我需要的所有 ID。如何为每个人添加一个观察者（更改时）？

$(id).on("change", function(event) {
  alert(id+"__"+$(id).value);
});

Answer 1

Prototype 支持开箱即用的事件委托。Event.on采用可选的第二个选择器参数。所以在你的情况下：

$("product-options-wrapper").on('click', 'select', function(event, element) {

  // This callback will only get fired if you've clicked on a select element that's a descendant of #product-options-wrapper
  // 'element' is the item that matched the second selector parameter, in our case, the select.

  ....

});

该参数可以是任何 CSS 选择器字符串：

$('my-element').on('click', '.some-class', function(event, element) { ... });

---

也请查看Element.select。这会将原始问题中的代码压缩为基本上一行：

$("product-options-wrapper").select('select');

这似乎有点令人困惑，因为您的选择器字符串是“选择”（您希望所有 SELECT 元素都位于#product-options-wrapper 下）。你也可以这样做：

$$('#product-options-wrapper select');

它们都返回一个匹配元素的数组。

高温高压

Answer 2

应该这样做。如果您需要更多帮助，请发布您的 html 或更好的jsfiddle 。

$(function(){
    $('#product-options-wrapper select').on("change", function(e) {
       alert(id+"__"+$(this).val());
    });
});

我猜你忘记了.product-options-wrapper 开头的那个来表明它是一个类？或者它真的是一个标签？

Answer 3

您只需要 div 上的单击处理程序（换句话说，使用事件委托）

var tab = $("product-options-wrapper");
tab.on('click',function(e){
  e = e || event;
  if ( /^select$/i.test((e.target || e.srcElement || {}).tagName) ){
    //do stuff
  }
});