0

負荷ハンドラーを動的に作成されたオブジェクト (本番コードのバックボーン ビュー) にバインドしようとしています。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);
  }
4

1 に答える 1

2

残念ながら、サブセレクターでの の使用はon、バブルアップするイベント タイプでのみ機能します。DOMloadイベントはツリーをバブルアップしないため、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');
}
于 2012-12-19T16:58:06.480 に答える