動的に生成されたテーブル内のセルから値を取得

Question

私は、SQLクエリからのデータに基づいてJavaScript経由で動的に生成されるテーブルを持っています。最初のセルには、その行内の2番目のセルの値をクリックする必要があるボタンが含まれています。何らかの理由で、jQueryのonclickイベントが発生していません。ブラウザにエラーがスローされていません。

HTML

... 
for (var i=0; i<queryReturned.Result.length; i++) { 
    var tableRow = document.createElement("tr"); 
    var cell = document.createElement("td"); 
    var button = document.createElement("button"); //Button gets added here 
    button.type = "button"; 
    button.value = "Remove Alert"; 
    button.className = "buttonSelect" 
    cell.appendChild(button); 
    tableRow.appendChild(cell); 
    //This loop creates the rest of the cells and fills in their data 
    for (var j=0; j<Object.keys(queryReturned.Result[i]).length; j++) { 
    var cell2 = document.createElement("td"); 
    var cellText = document.createTextNode(Object.values(queryReturned.Result[i])[j]); 
    cell2.appendChild(cellText); 
    tableRow.appendChild(cell2); 
    } 
    tableBody.appendChild(tableRow); 
} 
table.appendChild(tableBody); 
table.setAttribute("border", "2"); 
body.appendChild(table); 
... 

jQueryの

$(document).ready(function(){ 
$(".buttonSelect").on('click',function(){ 
    var currentRow=$(this).closest("tr"); 
    var col2=currentRow.find("td:eq(1)").html(); 
    alert(col2); //alert for now to test if we grabbed the data 
    }); 
}); 

Answer 1

そうのようなあなたのイベントハンドラ関数を言い替える：

$(document).on('click', '.buttonSelect', function(){ ... }); 

ので、それは同様に動的に追加された要素のために動作します。

どうすればいいのか教えてください。

Answer 2

第1に、主な問題は、委任されたイベントハンドラを使用してclickイベントをbutton要素に添付する必要があることです。

また、JSとjQueryの組み合わせが奇妙です。テーブル作成ロジックを大幅に簡素化できます。あまりにも。これを試してください：

$(function() { 
    var $table = $('<table />').appendTo('body'); // this wasn't in your code example, but should look like this 

    queryReturned.Result.forEach(function(result) { 
    var $tr = $("<tr />").appendTo($table); 
    var $td = $("<td />").appendTo($tr);  
    $('<button class="buttonSelect">Remove Alert</button>').appendTo($td); 

    for (var j = 0; j < Object.keys(result).length; j++) { 
     $('<td />').text(result[j]).appendTo($tr); 
    } 
    } 

    $(document).on('click', '.buttonSelect', function() { 
    var currentRow = $(this).closest("tr"); 
    var col2 = currentRow.find("td:eq(1)").html(); 
    alert(col2); 
    }); 
});