Ist es unmöglich, die Klick-Tabelle zu erhalten, die dynamisch generiert wird?

Question

$('.delete').on('click',function(){ 
    console.log("deleteclick"); 
}); 

for (i = 0; i < e.data.length;i++){ 
     $('#methodTable').append('<tr><td>' + e.data[i].isTejimai + 
       '</td><td>'+ e.data[i].isLossProfCut + '</td><td>' + 
      '<button id="' + e.data[i].id + 
      '" class="btn btn-default btn-md delete">' + 
      '<span class="glyphicon glyphicon-remove"></span>' + 
      '</button></td></tr>'); 
} 

Dieser Code <tr></tr> zum methodTable dynamisch

Dadurch wird die HTML-ähnliche (Debug-Fenster Ausgabe) gemacht Zugabe

<button id="6" class="btn btn-default btn-md delete" data-enpassid="__1"> 
    <span class="glyphicon glyphicon-remove"></span> 
</button> 

Es die Klasse hat delete, so nennen würde, wenn ich auf diese Schaltfläche klicken die delete function aber es funktioniert nicht.

Wenn ich die Tabelle nicht dynamisch erzeuge, funktioniert diese Funktion.

Answer 1

Da das .delete Element wurde dynamisch auf das DOM hinzugefügt, sollten Sie das Click-Ereignis mit der Delegation on() wie anbringt:

$('body').on('click','.delete',function(){ 
    console.log("deleteclick"); 
}); 

Hoffnung, das hilft.

$('body').on('click','.delete',function(){ 
 
    console.log("delete click on button "+this.id); 
 
}); 
 

 
for (i = 1; i <= 3;i++){ 
 
    $('#methodTable').append('<tr><td>Column 1 </td><td>Column 2 </td><td>' + 
 
    ' <button id="id_'+i+'" class="btn btn-default btn-md delete">' + 
 
    '<span class="glyphicon glyphicon-remove"></span>' + 
 
    '</button></td></tr>'); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table border="1" id='methodTable'></table>

Answer 2

In JavaScript Wenn Sie eine Veranstaltung zu einem bestimmten Elemente binden wollen, dann sollte dieses Element vorhanden sein, bevor Sie dieses Ereignis binden (auch das gleiche Element wie vorherigen, erstellen Sie neu).

Deshalb sind JavaScript-Frameworks wie AngularJs so berühmt, um das gleiche zu erreichen, das Sie wollen.

Answer 3

Statt:

$('.delete').on('click',function() { 
    //your operations 
}); 

Verwenden Sie die folgenden Schritte aus:

$('body').on('click', '.delete', function() { 
    //your operations 
});