動的に作成されたチェックボックスがjqueryイベントに応答しない

Webサービスからのデータに基づいてjqueryを使用して動的チェックボックスを作成しました。動的に作成されたチェックボックスがjqueryイベントに応答しない

var checkbx = '<td><input type="checkbox" class="select_ticket" data-id="'+ newjsondata[i].id +'"/></td>'; tr.append(checkbx);

私は何も起こりませんチェックボックスをクリックすると、他の言葉でのイベントが応答しません。

function test() { 
    console.log('okokok'); 
    var id = $(this).data("id"); 
    alert(id); 
} 
$(".select_ticket").on("click", test);

私はイベントをクリックしてイベントを成功させずに変更しようとしました。

誰かが私が間違いを犯した場所を理解するのに役立つことができます。

出典

2017-06-15 Krish

：あなたのハンドラ登録も新しくDOMに追加されたチェックボックスを登録するには、次のように変更します。チェックボックスの定義は、イベントを追加する前に定義する必要があります。あなたはhtmlのように見える行に上記のチェックボックスを追加していますが、あなたはJSのように見えるHTMLを持っています。答えが出る前に多くのものが必要です –

$（ ".select_ticket"）.on（ "click"、test）; tr.appendの後、問題はすべてのアイテムのイベントを再度登録することです。この問題をスキップする前に$（ ".select_ticket"）.off（ "click"）を実行すると、すべての項目について再度登録者がクリックされます。とにかくQuagaarによって与えられた答えが最も簡単で簡単なオプションです – hamboy75

htmlがエラーなく正常にレンダリングされるなら、[委任されたイベント]（http://api.jquery.com/on/#direct-and-delegated-イベント）、Quagaarによって既に答えられているように。 – yezzz

クリックハンドラは、登録時に存在するチェックボックスに対してのみ登録されます。あなたはあなたのコードの多くを示す必要がある

$('body').on('click', '.select_ticket', test);

（あなたはより限定的なセレクタのための「体」を交換する必要があります）

出典

2017-06-15 20:03:41 Quagaar

$（document）.on（ 'click'、 '.select_ticket'、test）;を推奨します。 – Woodrow

@Woodrowなぜ文書ですか？通常、私はセレクタを可能な限り絞り込む傾向があります。私は実際にjQueryがどのように動作するのか分かりませんが、ドキュメント全体を見て変更することは、DOMの（多かれ少なかれ）小さな部分を見ることよりもコストがかかります。 – Quagaar

私はできるだけセレクタを絞り込むことに同意します、何らかの理由であなたのクリックイベントが非常に動的なので、それをバインドする要素を絞り込むのが難しい場合、ドキュメントは便利です。 – Woodrow

動的に作成されたチェックボックスがjqueryイベントに応答しない

答えて

関連する問題