Dynamische Tabellenzeilen mit onClick Ereignisse

Question

Ich erzeuge eine Tabelle erstellen, und wenn ich die Zeilen erstellen habe ich eine for-Schleife wie folgt aus:

for (var i = 0 ; i < myList.length ; i++) { 
    var row$ = $('<tr/>'); 
    for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) { 
     if (columns[colIndex] == 'web_id'){ 
      cellValue = "<a onclick='showMoreData('myList[i][columns[colIndex]]')'>" + myList[i][columns[colIndex]] + "</a>" 
     } 
     else { 
       var cellValue = myList[i][columns[colIndex]]; 
     } 

     if (cellValue == null) { cellValue = ""; } 

     row$.append($('<td/>').html(cellValue)); 
    } 
    $(".table").append(row$); 

aber das funktioniert nicht, was zu tun ich tun muss Hinzufügen eines onclick-Ereignisses basierend auf dem Inhalt der Zeile in einer Spalte, sodass ich einen dynamischen Link hinzufügen kann?

Answer 1

Sie können ein A Element erstellen, binden Daten darauf und dann müssen Sie Ereignis Delegation erstellen und an den Tisch binden:

for (var i = 0 ; i < myList.length ; i++) { 
    var row$ = $('<tr/>'); 

    for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) { 
     var cellValue = ''; 
     if (columns[colIndex] == 'web_id'){ 
      // Set a data attribute with the colindex and add the class 'web_id' for the event delegation 
      cellValue = "<a href=\"\" class=\"web_id\" data-index=\"" + myList[i][columns[colIndex]] + "\">" + myList[i][columns[colIndex]] + "</a>"; 
     } else { 
      cellValue = myList[i][columns[colIndex]]; 
     } 

     if (cellValue == null) { cellValue = ""; } 

     row$.append($('<td/>').html(cellValue)); 
    } 

    $(".table").append(row$); 
} 

// Bind a click event for every .web_id element in the table 
$('.table').on('click', '.web_id', function(e) { 
    e.preventDefault(); 

    // You can put here the logic of the 'showMoreData()' function 
    alert($(this).data('index')); 
}); 

dies die Notwendigkeit ersetzen onclick den A Elemente in der hinzufügen Tabelle, weil ich ein Datenattribut namens data-index hinzugefügt - Dieses Attribut wird über die .data() Funktion der Jquery verfügbar sein.

Ich binde das Click-Ereignis des Ereignis-Delegation Ansatz, der nur ein Element einen Event-Handler legt, die .table, und das Ereignis muss nur Blase eine Ebene nach oben (aus den angeklickt .web_id zu ‚.table‘) . Reference