jquery - クリック イベント ハンドラーは、準備完了時に発生しますが、クリック時には発生しません

Question

jquery/ajax によって追加されたボタンがあり、クリックしたときにその値 (数値) を取得したいと考えています。問題は、それが決して発火しないことです。.ready でもクリックすると、外部で何も起こらない場合、ロード時に起動します。

$('.page').on("click", function(event){
    alert("clicked");
}

<button class="page">1</button>

ここで何が間違っていますか？

Answer 1

代わりに試してください：

$('body').on("click", ".page", function(event){
    alert("clicked");
}

要素は動的に追加されるため、ページの読み込み時に存在する要素に基づいてクリック イベントをバインドする必要があります。理想的には、本体よりも DOM に近い要素が必要ですが、最悪の場合はそれを使用できます。

ドキュメントから：

イベント ハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが .on() を呼び出す時点でページに存在している必要があります。要素が存在し、選択できることを確認するには、ページの HTML マークアップにある要素のドキュメント対応ハンドラー内でイベント バインディングを実行します。新しい HTML がページに挿入されている場合は、要素を選択し、新しい HTML がページに配置された後にイベント ハンドラーを添付します。