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');
  });
});

但是，attach事件侦听器不起作用。但是，如果我将事件处理程序附加到这样的循环中，它将起作用：

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

我不想在循环中设置事件监听器，因为我认为它会减慢脚本运行速度，并且是一个过大的杀伤力。

我还需要提到我的元素数组很大。

Answer 1

Document fragments没有addEventListener或类似名称。它们是Node的子接口，也实现了ParentNode，但没有实现EventTarget。

您的选择是：

将处理程序直接附加到input（您已经说过不想这样做）上，或者
向包含input的片段中添加一个顶级容器元素，然后在其上放置事件处理程序。
将处理程序附加到您将文档片段添加到的文档上（如果其中涉及您的代码）

将事件侦听器附加到dom片段

1 个答案: