delete confirmdialog wird nur für die erste Zeile in einer Tabelle bearbeitet

Question

Dies ist das Beispiel meiner Tabelle, ich habe 2 Symbole für Bearbeitungsaktion und löschen. Wenn ich lösche, möchte ich einen Popup-Bestätigungsdialog machen. Es funktioniert nur, wenn ich auf das Löschsymbol der ersten Zeile klicke.
Für andere Zeilen fehlt das Ereignis jQuery (funktioniert nicht).

Dies ist meine .php Kodierungsdatei.

<tbody>  
//data connection with db 
while ($row = mysql_fetch_array ($res)) 
{ 
    //data rows 
?> 
<tr class="odd" role="row" id="row_5"> 
    <td align="center"> 
     <a href="#"><img src="../images/sys_icon_edit.png" width="20" height="20" alt="Edit"></a> 
     <a id="id-btn-dialog2" href="#"><img src="../images/icon_trash.png" width="20" height="20" alt="Delete"></a> 
    </td> 
    //other data fields here 
</tr>  
<?php 
} 
?>  
</tbody> 

Dies ist die damit verbundene jquery.

jQuery(function($) { 

       $("#id-btn-dialog2").on('click', function(e) {e.preventDefault(); 
       $("#dialog-confirm").removeClass('hide').dialog({ 
         resizable: false, 
         width: '320', 
         modal: true, 
         title_html: true, 
         buttons: [{ 
           html: " Delete ", 
           "class" : "btn btn-danger btn-minier", 
           click: function() { 
            $(this).dialog("close"); 
           }}, 
           { 
           html: " Cancel ", 
           "class" : "btn btn-minier", 
           click: function() { 
            $(this).dialog("close"); 
           } 
          }] 
        }); 
       }); 
}) 

Bitte helfen Sie mir, wie kann ich es tun? Ich bin gerade auf Anfängerniveau zu php, jQuery und Javascript.
Dieser jQuery Code ist, was ich im Internet gefunden habe, und ich habe nur den Titeltext, nicht Funktionscode geändert.

Vielen Dank im Voraus.

Answer 1

Verwenden Sie anstelle von id eine Klasse für die Schaltflächen zum Entfernen und setzen Sie den Handler auf Ihr body -Tag für die Unterstützung dynamischer Zeilen.

$("body").on('click', ".delete", function(e) { 
      e.preventDefault(); 
      $("#dialog-confirm").removeClass('hide').dialog({ 
        resizable: false, 
        width: '320', 
        modal: true, 
        title_html: true, 
        buttons: [{ 
          html: " Delete ", 
          "class" : "btn btn-danger btn-minier", 
          click: function() { 
           $(this).dialog("close"); 
          }}, 
          { 
          html: " Cancel ", 
          "class" : "btn btn-minier", 
          click: function() { 
           $(this).dialog("close"); 
          } 
         }] 
       }); 
      }); 

Answer 2

Sie verwenden ID/# für mehrere Instanzen eines Elements.

Verwenden Sie stattdessen eine Klasse.

Für weitere Informationen und Forschung besuchen Sie this link.

Dies ist ein Example davon, wie ich es tun würde.