Ajaxで表示したテーブル内データのjQueryイベントが動作しない

Question

###前提・実現したいこと
PHPでWebアプリケーションを作っています。
データベースから取得したデータを以下のようにテーブルに出力したいです。

・画面初期表示：500件を表示。
・続きをみるを押下：＋500件をテーブルへ追加表示。
・自動更新：現在表示している件数を30秒ごとに自動で更新して表示する。

いずれもAjaxをつかって画面更新無しで実現します。
コードはざっくり以下の感じです。

###該当のソースコード

<div id="dataArea">
</div>

.ajax{
#PHP呼び出し
success{
  #DBdatasはPHPのデータ戻り値
  $('#dataArea').append('DBdatas');
}

print <table id="selection">

#ループ処理
  print <tr><td>データ1</td>;
  print <td>データ2</td>;
  print <td><input type="button" id="btn1">ボタン1</td>;
  print <td><input type="button" id="btn2">ボタン2</td></tr>;
###
print </table>

###発生している問題・エラーメッセージ

上記処理でデータとボタンは表示されます。
ただし、以下2点の問題が発生しています。

####1.ボタンが押せない
ボタンは表示されます。
ただし押した際に発生するイベントが動作しません。
イベントはjsファイルに以下のように記載しています。

$('#btn1').click(function〜

####2.id="selection"をjQueryで操作できない
こちらもボタンと同じく動作しません。
具体的にはクリックしたら色が変わってクラスをtrに付与するイベントを1.同様にjsファイルにjQueryで記載しているのですが、反応しません。

###仮説
Ajaxでの読み込みでなく、初期表示でPHPをHTMLから直接includeすれば問題は発生しませんでした。

もしかしたらAjaxが問題？と思うのですが、なんとか回避方法を見つけたいです。

「続きを見る」の機能はAjax必須と思うので、初期表示での回避はできないと考えています。

AjaxもしくはjQueryのバグなんでしょうか？
知恵をお貸しください。。。

###補足情報(言語/FW/ツール等のバージョンなど)
OS：WindowsServer2012R2
DB：MS SQL Server 2016
MW：IIS
PHP：PHP7.1
Browser：IE11

Answer 1

$( '#dataArea' ).on( 'click', '#btn1', function(){} );

【実践、jQuery - .on()と.off()を使いこなす 1 | CodeGrid】
https://app.codegrid.net/entry/practical-jquery-1

【.on() | jQuery API Documentation】
http://api.jquery.com/on/

Comments

[entry4code]

動くようになりました。大変助かりました！

Answer 2

後からAjaxで追加された要素は、
$('#btn1').click(function〜が実行された時にはなかったのですから、
イベントが発生しないのは当然です。

後から追加された要素でもイベントを発生させたい場合は、
kei344さんが回答してくれているものになります。
#dataArea内にある、全ての#btn1という指定方法です。

あと、これは別件になりますが、HTMLのidは重複してはいけませんので、
btn1-1,btn1-2 のように連番を振るようにするなどした方がいいと思います。
重複してたからといって、動かないってわけではないんですが。

https://www.w3.org/TR/2014/REC-html5-20141028/dom.html#the-id-attribute
ここに書いてますが抜粋すると、以下の部分になります。
The value must be unique amongst all the IDs
値はすべてのIDの中でユニークである必要がある