Question

我正在尝试将加载处理程序绑定到动态创建的对象（我的生产代码中的主干视图）。我尝试使用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');
}

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

1 个答案: