javascript - 如何将负载处理程序附加到动态创建的项目

Question

我正在尝试将加载处理程序绑定(bind)到动态创建的对象(生产代码中的主干 View )。我尝试使用 In jQuery, how to attach events to dynamic html elements? 中概述的方法，它适用于点击处理程序，但不适用于加载处理程序。有谁知道如何解决这个问题吗？

这有效(使用点击处理程序)

  $(document).ready(function() {
    $("body").on("click", "img", function(){
      console.log("foo");
    });

    create();
  });

  function create(){
    $img = $("<img />").attr("src", "http://www.pureweber.com/wp-content/uploads/2011/04/jquery_icon.png");
    $("body").append($img);
  }

但这并不(使用负载处理程序)

  $(document).ready(function() {
    $("body").on("load", "img", function(){
      console.log("foo");
    });

    create();
  });

  function create(){
    $img = $("<img />").attr("src", "http://www.pureweber.com/wp-content/uploads/2011/04/jquery_icon.png");
    $("body").append($img);
  }

Answer 1

不幸的是，使用 on 与子选择器仅适用于冒泡的事件类型。 DOM load 事件不会在树中冒泡，因此它永远不会到达您正在监听的 body 位置。

参见http://en.wikipedia.org/wiki/DOM_events

您需要手动将处理程序附加到您创建的任何图像。

$(document).ready(function() {
  $("body img").on("load" onLoad);

  create();
});

functon onLoad(){
    console.log("foo");
}

function create(){
  $("<img />")
    .on('load', onLoad)
    .attr("src", "http://www.pureweber.com/wp-content/uploads/2011/04/jquery_icon.png")
    .appendTo('body');
}