삭제 확인 대화 상자는 테이블의 첫 번째 행에 대해서만 작동합니다.

Question

이것은 내 테이블의 예입니다. 편집 작업과 삭제를 위해 두 개의 아이콘이 있습니다. 삭제할 때 팝업 확인 대화 상자를 만들고 싶습니다. 첫 번째 행의 삭제 아이콘을 클릭했을 때만 작동합니다.
다른 행의 경우 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

id 대신 제거 버튼에 클래스를 사용하고 동적 추가 행 지원을 위해 body 태그로 핸들러를 설정하십시오.

$("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입니다.