Tengo esta función que crea una tabla en una ventana emergente modal y la tabla se completa a partir de datos en una matriz que se pasa desde una llamada ajax. Ahora, al hacer clic en un botón en la ventana emergente modal, necesito obtener el valor de item.TimedPathwayID que tiene su botón de opción marcado y agregarlo a un campo oculto.
function PopulateTimedPathwaysTable(tblData) { var tbody = $('#tblTimedPathways tbody'); $.map(tblData.d, function (item) { tr = $('<tr></tr>'); tr.append('<td class="pathwayID">' + item.TimedPathwayID + '</td>'); tr.append('<td>' + item.TimedPathwayName + '</td>'); tr.append('<td><input type="radio" class="radioSelection" name="timedPathwaySelection"" />'); tbody.append(tr); }); $('input[name=timedPathwaySelection]:first').attr('checked', true);} }He estado jugando con este tipo de cosas pero sin alegría y el botón de radio en la primera fila está marcado de forma predeterminada, por lo que esto realmente no puede vincularse a un evento de clic si un usuario simplemente acepta el valor predeterminado sin hacer clic. Entonces, ¿cómo puedo hacerlo por favor?
$('body').on('click', '.radioSelection', function () { var $tbl = $('#tblTimedPathways tbody'); var $dataRow = $tbl.closest('tr'); var id = $dataRow.find('td').eq(0).html(); }); let $this = $(this); //this is the radio button let id = $this.closest("tr").find("td.pathwayID").text(); También repetiría que generalmente agregaría la id como un atributo a la fila para eliminar la necesidad de encontrar más adelante.
//sample data let data = { d: [{ TimedPathwayID: 1, TimedPathwayName: "test" }, { TimedPathwayID: 2, TimedPathwayName: "test" }, { TimedPathwayID: 3, TimedPathwayName: "test" } ] }; function PopulateTimedPathwaysTable(tblData) { var tbody = $('#tblTimedPathways tbody'); $.map(tblData.d, function(item) { tr = $('<tr></tr>'); tr.append('<td class="pathwayID">' + item.TimedPathwayID + '</td>'); tr.append('<td>' + item.TimedPathwayName + '</td>'); tr.append('<td><input type="radio" class="radioSelection" name="timedPathwaySelection"" />'); tbody.append(tr); }); $('input[name=timedPathwaySelection]:first').attr('checked', true); } //populate it PopulateTimedPathwaysTable(data); $('body').on('click', '.radioSelection', function () { let $this = $(this); //this is the radio button //console.log($this); let id = $this.closest("tr").find("td.pathwayID").text(); console.log(id); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="tblTimedPathways"> <tbody> </tbody> </table>