将事件监听器附加到DOM片段。

Question

我希望将一个"onchange"事件监听器附加到DOM片段，但它不能正常工作。

例如，我有以下代码:

$(function(){
  var elements = [
    '<input type="checkbox" name="one" value="kung" />',
    '<input type="checkbox" name="one" value="fu" />'
  ];

  var fragment = $(document.createDocumentFragment());

  fragment.on('change', 'input[type="checkbox"]', function(){
    alert('my kung fu is strong');
  });

  $.each(elements, function(index, element){
    fragment.append(element);
    fragment.find('input:last-child').trigger('change');
  });
});

然而，附加事件监听器并没有起作用。但是，如果我像这样在循环中附加事件处理程序，它就会起作用：

fragment.find('input[type="checkbox"]').on('change', function(){
  alert('this works, but it is not ok');
});

我不想在循环中设置事件监听器，因为我觉得这会减慢脚本的速度并且有些过度。

另外，我需要提到我的元素数组非常大。

- dg_lucian

Answer 1

文档片段 没有 addEventListener 或类似方法。它们是 Node 的子接口，也实现了 ParentNode 接口，但没有实现 EventTarget 接口。

你的选项如下：

1. 直接将处理程序添加到 input 元素上（你说过不想这样做）。

2. 向片段添加一个顶级容器元素，该元素包含 input 元素，并在该容器上添加事件处理程序。

3. 将处理程序附加到添加文档片段的文档（如果代码涉及其中）上。

- T.J. Crowder

---

你真是个天才，你的第二个选项非常有效，谢谢。至于第三个选项，我知道它也能用，但我不能在所有元素都附加之前附加片段，因为这会导致回流并减慢脚本的速度，而我需要在每个元素附加后立即触发onchange事件。 - dg_lucian