删除确认对话框仅适用于表中的第一行答案

【问题标题】：delete confirm dialog is only worked for the first row in a table删除确认对话框仅适用于表中的第一行
【发布时间】：2016-09-27 01:41:34
【问题描述】：

这是我的表格示例，我有 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代码是我在网上找到的，我只是改了标题文字，不是功能代码。

提前致谢。

【问题讨论】：

$( "#id-btn-dialog2" ).on('click'...) 您将 id 用于多个项目。改用一个类。

标签： javascript jquery dialog htmldatatable

【解决方案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" );
                            }
                        }]
                });
            });

【讨论】：

非常感谢。现在它起作用了！我还学习了一些屏幕点击事件来连接 javascripts。谢谢！
没问题。如果对您有帮助，请勾选正确的答案;)

【解决方案2】：

您将 ID / # 用于一个元素的多个实例。

尝试改用类。

欲了解更多信息和研究，请访问this link。

这是一个Example 我会怎么做。

【讨论】：

没问题，很高兴能帮上忙：]