0

これは私のテーブルの例です。編集アクションと削除用の 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 コードは、私がインターネットで見つけたもので、機能コードではなく、タイトル テキストを変更しただけです。

前もって感謝します。

4

2 に答える 2

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" );
                            }
                        }]
                });
            });
于 2016-09-26T17:29:49.357 に答える
1

要素の複数のインスタンスにID / #を使用しています。

代わりにクラスを使用してみてください。

詳細と調査については、このリンクを参照してください。

これは私がそれを行う方法の例です。

于 2016-09-26T17:29:40.607 に答える