Wert aus Zelle in dynamisch generierter Tabelle erhalten

Question

Ich habe eine Tabelle, die dynamisch über JavaScript auf der Grundlage von Daten aus einer SQL-Abfrage generiert wird. Die erste Zelle enthält eine Schaltfläche, die den Wert in der 2. Zelle innerhalb dieser Zeile abrufen soll. Aus irgendeinem Grund wird das jQuery onclick -Ereignis nicht ausgelöst. Im Browser werden keine Fehler angezeigt.

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

Formulieren Sie Ihre Event-Handler-Funktion wie folgt:

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

so wird es auch für dynamisch hinzugefügte Elemente arbeiten.

Lassen Sie uns wissen, wie es geht!

Answer 2

Zunächst besteht das Hauptproblem darin, dass Sie einen delegierten Ereignishandler verwenden müssen, um das Ereignis click an das Element button anzufügen.

Außerdem verwenden Sie eine seltsame Mischung aus JS und jQuery. Sie können die Tabellenerstellungslogik massiv vereinfachen. Auch. Versuchen Sie folgendes:

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