javascript - 動的に作成するボタンで起動しないクリックイベント

Question

divにボタンを動的に作成しました。そして、ボタンのクリックやその他のイベントをバインドします。ただし、問題は、クリックイベントが最初にクリックされたボタンに対して1つだけ発生することです。他のバインディングイベントでも同じように発生します。サンプルコードは

 $('#divButtons input[type=button]').each(function () {
     $(this).bind('mouseover', function (e) {
         // some work
     }).bind('mouseout', function (e) {
         // some work
     }).bind('click', function (e) {
         // some work
     });
 });

バインドするとうまく機能しdocument.ready()ますが、私の場合、ボタンはDOMの準備ができてからずっと後に作成されました。

また、なぜこのように動作するのか知りたいのですが…？

Answer 1

jQuery 1.7以降を使用している場合は、on（）を使用してください。実際には、each（）は必要ありません。

$(document).on({
    mouseover: function(e) {
            // some work
    },
    mouseout: function(e) {
           // some work
    },
    click: function(e) {
           // some work
    }
}, '#divButtons input[type=button]');

ドキュメントを、委任されたイベントハンドラーの最も近い非動的要素に置き換えます。