.append()で追加した部分にjqueryの処理が効かない

お世話になります。
テーブルに動的に項目が増やしたくjqueryでappendを使い項目が増えるよう処理をしており、その追加した項目のボタン部分にクリックイベントを設定したいのですが上手くいきません。htmlに直接書き込んだ場合はきちんとクリックイベントが発生してくれているのですが、どうすればappendで追加したボタンにもクリックイベントが設定できるのでしょうか？お分かりの方がいらっしゃれば知恵をお貸しいただけると非常に幸いです。よろしくお願い致します。
下記がソースです。

javascript
1$(function() {
2	$.ajax({
3		type: "POST",
4		url : "http://localhost:8080/PosSystem/ComprehensiveProposal",
5		contentType: "application/x-www-form-urlencoded; charset=UTF-8",
6		timeout:10000,
7		success : function(data) {
8			var suggest = JSON.parse(data);
9			var suggestion = eval(suggest);
10			for (var i = 0; i < suggestion.length-1; i++) {
11				var name = suggestion[i][4]
12				var price = suggestion[i][9]
13				price = price.replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,' );
14				var pic = suggestion[i][10]
15				$("#popularTable").append(
16			            $("<tr></tr>")
17			                .append($('<td><img src="'+pic+'" alt="画像を表示できません" width="60px" height="50px"></td>'))
18			                .append($('<td></td>').text(name))
19			                .append($('<td><BUTTON>詳細</BUTTON></td>'))
20			    );
21				$('td').eq(0).addClass('pic');
22				$('td').eq(1).addClass('productname');
23				$('BUTTON').addClass('detail');
24
25			}
26		},
27		error : function(XMLHttpRequest, textStatus, errorThrown) {
28			alert("リクエスト時になんらかのエラーが発生しました：" + textStatus +":\n" + errorThrown);
29		}
30	});
31
32	$(".detail").on("click",function(){//このメソッドを設定したい
33		alert("test")
34		 var index = $('button.detail').index(this);
35		console.log(index);
36	});

html
1<DIV id="recommend">
2  <H2>売れ筋商品に似た商品はこちらです</H2>
3  <TABLE border="1" id="popularTable">
4    <TR>
5      <TH>イメージ</TH>
6      <TH width="200px">商品名</TH>
7      <TH>詳細を見る</TH>
8    </TR>
9  </TABLE>
10</DIV>

行動規範の内容に同意します

回答1件

自己解決

他のサイトを参考にして出来ました。

javascript
1$.ajax({
2		type: "POST",
3		url : "http://localhost:8080/PosSystem/ComprehensiveProposal",
4		contentType: "application/x-www-form-urlencoded; charset=UTF-8",
5		timeout:10000,
6		success : function(data) {
7			var suggest = JSON.parse(data);
8			var suggestion = eval(suggest);
9			for (var i = 0; i < suggestion.length-1; i++) {
10				var name = suggestion[i][4]
11				var price = suggestion[i][9]
12				price = price.replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,' );
13				var pic = suggestion[i][10]
14				$("#popularTable").append(
15			            $("<tr></tr>")
16			                .append($('<td><img src="'+pic+'" alt="画像を表示できません" width="60px" height="50px"></td>'))
17			                .append($('<td></td>').text(name))
18			                .append($('<td><BUTTON>詳細</BUTTON></td>'))
19			    );
20				$('td').eq(0).addClass('pic');
21				$('td').eq(1).addClass('productname');
22				$('BUTTON').addClass('detail');
23
24			}
25		},
26		error : function(XMLHttpRequest, textStatus, errorThrown) {
27			alert("リクエスト時になんらかのエラーが発生しました：" + textStatus +":\n" + errorThrown);
28		}
29	});
30	$(document).on("click", ".detail", (function(){//この部分の記述を変更
31		alert("aiu");
32		 var index = $('button.detail').index(this);
33		console.log(index);
34	}));