Getting value from cell within dynamically generated table
<p>I have a table that is dynamically generated via JavaScript based on data from an SQL query.  The first cell contains a button that should retrieve the value in the 2nd cell within that row onclick.  For some reason, the jQuery onclick event is not firing.  No errors are being thrown in the browser.  </p>

<p>HTML</p>

<pre><code>...
for (var i=0; i&lt;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&lt;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);
...
</code></pre>

<p>jQuery</p>

<pre><code>$(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
  });
});
</code></pre>