お世話になります。
テーブルに動的に項目が増やしたく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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。