1

ページ ボタンのクリック イベントを収集しています。通常、静的に作成された DOM 要素からオブジェクトを収集しています。使用することで、

 $('input[type=button]').each(function () {
              $(this).bind('click', function () {
                  Console.log(this);
              });
          });

しかし、新しいボタンを動的に追加すると、

 vvar newBtn = document.createElement('input');
      newBtn.type = 'button';
      newBtn.setAttribute('id', 'JgenerateBtn');
      newBtn.setAttribute('value', 'JgenerateBtn');
      newBtn.onclick = function () { alert('javascript dynamically created button'); };
      var holderDiv = document.getElementById('holder');
      holderDiv.appendChild(newBtn);

このコードの後、新しいボタンが作成され、イベントもトリガーされますが、上記のコードと同じように、イベントオブジェクトを取得できません。

 $('input[type=button]').each(function () {
          $(this).bind('click', function () {
              Console.log(this);
          });
      });

動的に作成された要素のイベント オブジェクトを取得するための提案を提供してください。

4

3 に答える 3

6

動的に追加された要素にイベントをバインドするために on()を使用できます。このような：

$(document).on('click', 'input[type=button]', function(){
    console.log(this);
});

これは簡単な例です。最初に読み込まれたときに既にページに表示されているボタンに近い要素にバインドすることをお勧めしますdocument。

于 2013-06-10T07:15:36.323 に答える
1

以下を使用する必要があります。

// New way (jQuery 1.7+) - .on(events, selector, handler)
$('#holder').on('click', ':button', function(event) {
    alert('testlink'); 
});

これにより、要素内の任意のボタンにイベントがアタッチされ、要素ツリー#holder全体をチェックする必要がなくなり、document効率が向上します。

詳細はこちら：-

于 2013-06-10T07:22:08.817 に答える
0

イベント オブジェクトは、最初の引数としてクリック ハンドラーに渡されます。

$('input[type=button]').each(function () {
    $(this).bind('click', function (event) {
        Console.log(event);
    });
});
于 2013-06-10T07:17:18.140 に答える