диалог подтверждения подтверждения работает только для первой строки в таблице

Question

Это пример моей таблицы, у меня есть 2 значка для действия редактирования и удаления. При удалении я хочу создать диалог подтверждения всплывающих окон. Он работает только тогда, когда я щелкнул значок удаления первой строки.
Для других строк событие jQuery отсутствует (не работает).

Это мой файл кодировки .php.

<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> 

Это связанный с ним 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"); 
           } 
          }] 
        }); 
       }); 
}) 

Пожалуйста, помогите мне, как я могу это сделать? Я просто на начальном уровне для php, jQuery и javascript.
Этот код jQuery - это то, что я нашел в Интернете, и я просто изменил текст заголовка, а не функциональный код.

Заранее спасибо.

Answer 1

Вместо идентификатора используйте класс для своих кнопок удаления и установите обработчик тега тела для поддержки динамически добавленных строк.

$("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

Вы используете ID/# для нескольких экземпляров элемента.

Попробуйте использовать класс вместо этого.

Для получения дополнительной информации и исследований посетите this link.

Это Example, как я это сделаю.