2

私はデータ テーブルのセットアップ (http://datatables.net/) を持っており、テーブルから行を削除し、確認するために jQuery ダイアログ モーダル ポップアップを表示するオプションを使用しようとしています。ただし、表の最初のページではモーダルが正常に機能しますが、表が 2 ページ目に移動すると、モーダルが機能しなくなります。私の推測では、テーブルが次の 10 エントリにページ付けされると、ダイアログのクリック呼び出しを削除する何かが発生します。

モーダルのコードは次のとおりです。

    $('#delete-dialog').dialog({
        autoOpen: false, 
        width: 400,
        modal: true
    });

    $('.delete_modal').click(function (e) {
        e.preventDefault();
        var targetUrl = $(this).attr("href");
        $('#delete-dialog').dialog({
          buttons: {
            "Delete": function() {
              window.location.href = targetUrl;
            },
            "Cancel": function() {
              $(this).dialog("close");
            }
          }
        });
        $('#delete-dialog').dialog("open");
    });

そしてここにモーダルの私のコードがあります:

<div id="delete-dialog" title="Remove User">
    <p>Are you sure you want to delete this user?</p>
</div>

テーブルの最初のページでは機能するのに、2 番目のページでは機能しない理由がわかりませんか?

ここに私の削除コードがあります:

<li><a href="?page=users&sub=admins&action=delete&id=<?=$row['id']?>" class="delete_modal"><span class="icos-trash"></span>Delete</a></li>
4

1 に答える 1

6

私の推測では、jquery にバインドされていない新しい要素を読み込んでいると思います。新しい要素をバインドするか、ハンドラーを .delete_modal クラスのようにアタッチすることができます。 

$("body").on("click", ".delete_modal", function (e) {
e.preventDefault();
        var targetUrl = $(this).attr("href");
        $('#delete-dialog').dialog({
          buttons: {
            "Delete": function() {
              window.location.href = targetUrl;
            },
            "Cancel": function() {
              $(this).dialog("close");
            }
          }
        });
        $('#delete-dialog').dialog("open");
});
于 2012-08-15T20:25:44.127 に答える