52

jQueryメソッドで動的に生成された<div>withがあります：id="modal"load()

$('#modal').load('handlers/word.edit.php');

word.edit.phpモーダルにロードされるいくつかの入力要素が含まれています<div>。

jQueryのkeyupメソッドを使用すると、イベントの発生後に入力値をキャプチャできますが、要素がモーダルdivに動的に追加されると、ユーザーがテキストを入力したときにイベントが発生しなくなります。

動的に作成された要素によってトリガーされるイベントの処理をサポートするjQueryメソッドはどれですか？

新しい入力要素を作成するためのコードは次のとおりです。

$('#add').click(function() {
    $('<input id="'+i+'" type="text" name="translations' + i + '"  />')
      .appendTo('#modal');

ユーザーの値を取得するためのコードは次のとおりです。

$('input').keyup(function() {
    handler = $(this).val();
    name = $(this).attr('name');

この2番目のコードブロックは元の要素に対して機能しているように見えますが、動的に生成された新しい要素によって起動されません。

4

5 に答える 5

42

ページ内の最も近い静的祖先要素にイベントを委任する必要があります ( 「イベントの委任について」も参照してください)。これは単純に、イベント ハンドラーをバインドする要素は、ハンドラーがバインドされた時点で既に存在している必要があることを意味します。そのため、動的に生成された要素の場合、イベントがバブルアップし、それをさらに処理できるようにする必要があります。

jQuery.onメソッドは、これを行う方法です (または.delegate古いバージョンの jQuery の場合)。

// If version 1.7 or above

$('#modal').on('keyup', 'input', function() {
    handler = $(this).val();
    name = $(this).attr('name');
});

または古いバージョンで

// If version 1.6 or below

// note the selector and event are in a different order than above
$('#modal').delegate('input', 'keyup', function()
{
    handler = $(this).val();
    name = $(this).attr('name');
});
于 2012-10-10T23:31:20.813 に答える
7

これは、イベントを配線した後に入力要素を追加しているために発生しています。.onを試してください：

$('body').on('keyup', 'input', function() {
    handler = $(this).val();
    name = $(this).attr('name');
});

を使用すると、イベントが元々ページにある入力と、後で動的に追加される入力に.on確実に接続されます。keyup

于 2012-10-10T23:26:48.793 に答える
3

DOM を動的に変更すると、jQuery はそれらにイベント ハンドラーをアタッチしません。on() および委任されたイベントを使用する必要があります

入力項目には、次のようなものが必要です。

$("<parentSelector>").on("keyup", "input", function() { 
    handler = $(this).val();
    name = $(this).attr('name');
})

ここで、parentSelector は入力要素よりも DOM の上位にあるものであり、ページの読み込み時に存在する要素、おそらくフォーム ID などです。

于 2012-10-10T23:29:01.780 に答える
1

関数バインドはページの読み込みで行われます。関数 live () を使用して動的に作成された要素を処理する。例：

$ ("p"). live ("click", function () {
    // Your function
});
于 2012-10-10T23:30:08.627 に答える
0

すべてのフォーム要素、特に選択ボックスの変更をキャプチャする必要がある場合は、ここでは言及されていませんが、次のコードを使用すると便利です。

$(document).on('change', ':input', function () {
   alert('value of ' + $(this).attr('name') + ' changed')
});

これは、、、、、、inputなどtextareaをすべてカバーする必要があります。selectcheckboxradio

于 2015-06-08T21:39:05.703 に答える