0

.live() の使用:

<input type="button" value="button" />

$(":input[type=button]").live({
      click: function() {
            $(this).after('<input type="button" value="new" />');
      },
      mouseover: function() {
            //do something
      },
      mouseout: function() {
            //do something
      }
    });

デモ: http://jsfiddle.net/F9gC4

ここで委任はうまくいきます。「ボタン」または「新規」をクリックすると、新しいボタン要素が作成されます。

.on() の使用:

<input type="button" value="button" />

$(":input[type=button]").live({
      click: function() {
            $(this).after('<input type="button" value="new" />');
      },
      mouseover: function() {
            //do something
      },
      mouseout: function() {
            //do something
      }
    });

デモ: http://jsfiddle.net/CB8fh

ここでは委任は機能しません。「新規」ボタンをクリックしても要素が作成されない (発火できない)

では、委譲 (将来の要素) で .on() 複数のイベント ハンドラーを使用するにはどうすればよいでしょうか?

これは可能ですか？

4

2 に答える 2

5

このコードを試してください：

$(document).on({
      click: function() {
            $(this).after('<input type="button" value="new" />');
      },
      mouseover: function() {
            //do something
      },
      mouseout: function() {
            //do something
      }
}, ':input[type=button]');​

デリゲートが作成済み/将来の要素を操作するには、イベントをドキュメントに添付し、.on 関数の「セレクター」引数を使用してイベントをターゲットにする必要があります。テストされていませんが、理論的には動作するはずです! on 関数のドキュメントを参照してください。ライブのドキュメントにも.on 関数への移行に関するセクションがあります。

@Joyが彼の答えで言ったように、編集documentは追加したかっただけです。 にアタッチする必要はありません。デリゲートするターゲット要素に近いほど良いです（ただし、要素が ajax/ の影響を受けないことを確認する必要があります） dom の変更により、イベント ハンドラーが削除される可能性があります)。

于 2012-05-30T12:41:01.640 に答える
2

$.onこのような場合、イベントを親要素にバインドする必要があります

$(document).on({
  click: function() {
        $(this).after('<input type="button" value="new" />');
  },
  mouseover: function() {
        //do something
  },
  mouseout: function() {
        //do something
  }
},':input[type=button]');​

この場合、私は にバインドしています。dom に常に存在するdocument任意のものにバインドできます。parent

働くフィドル

参考：$.on

于 2012-05-30T12:40:03.963 に答える