7

ブートストラップ モーダルを使用してユーザーを削除するために ajax 呼び出しを実行しようとしています。モーダルは確認目的で使用され、次のとおりです。

<!-- Modal -->
<div id="deleteModal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Delete user</h3>
</div>
<div class="modal-body">
<p>You are about to delete this user. Are you sure that you want to continue?</p>
</div>
<div class="modal-footer">
<button id="confirm" class="btn btn-primary">Yes</button>
<button id="cancel" class="btn" data-dismiss="modal" aria-hidden="true">No, leave</button>
</div>
</div>

次に、次のJavaScriptを使用してユーザー入力を処理しています

    $('a#delete').click(function(e){
        var anchor = this;
        $('#deleteModal').modal('show');
        $('button#confirm').click(function(e){
            $('#deleteModal').modal('hide');
            $.ajax({
                url: $(anchor).attr('href'),
                success:function(result){
                    $(anchor).closest('tr').addClass("error");
                    $(anchor).closest('tr').delay(2000).fadeOut();
              }});
        });
        return false;
    });

ユーザーがクリックしなければならないリンクはこのようなものです

<a id="delete" href="/admin/edit/user/delete/30" class="btn btn-danger" user="30"><i class="icon-trash"></i> Delete</a>

それは機能しますが、何か奇妙なことが起こることに気付きました。クリックして 1 人のユーザーを削除し、モーダルからアクションをキャンセルしてから、アクションを確認して別のユーザーを削除することを選択すると、両方のユーザーが削除されます。

私が宣言したルールは、セッション中にクリックされたオブジェクトにも適用されると思います。これを回避する方法はありますか？

4

3 に答える 3

8

これは、でclickイベントを登録する方法が原因ですbutton#confirm。削除ボタンをクリックするたびに、新しいクリックイベントハンドラーがモーダルダイアログの確認ボタンに登録されます。

あなたのアプローチの問題はここに示されています。

ロジックを2つに分割することで修正できます

$('button#confirm').click(function(e){
    $('#deleteModal').modal('hide');
    $.ajax({
        url: $('#deleteModal').attr('href'),
        success:function(result){
            $(anchor).closest('tr').addClass("error");
            $(anchor).closest('tr').delay(2000).fadeOut();
      }});
});

$('a#delete').click(function(e){
    var anchor = this;
    $('#deleteModal').modal('show').attr('href', $(anchor).attr('href'));
    return false;
});

ここではconfirm、ページの読み込み時にクリックイベントを1回だけ登録しますが、削除ボタンがクリックされると、user属性を介してコンテキスト情報が確認モーダルに渡されます。確認コールバックでは、このコンテキスト情報を使用して、削除する必要のあるユーザーを決定します。

こちらのデモでテストできます。

于 2013-01-21T12:56:02.663 に答える
0

ユーザーがリンクをクリックすると、ダイアログ ボタンがクリックされたにもかかわらず送信されます。デフォルトの動作を防ぐ必要があります。e.preventDefault();

  $('a#delete').click(function(e){
    e.preventDefault();
    var anchor = this;
    $('#deleteModal').modal('show');
    $('button#confirm').click(function(e){
        $('#deleteModal').modal('hide');
        $.ajax({
            url: $(anchor).attr('href'),
            success:function(result){
                $(anchor).closest('tr').addClass("error");
                $(anchor).closest('tr').delay(2000).fadeOut();
          }});
    });
    return false;
});

これを行う別の方法は、href 値をリンクに配置しないことです。すでにユーザー属性を持っているので、ある種の重複です:

<a id="delete" class="btn btn-danger" user="30"><i class="icon-trash"></i> Delete</a>

そしてjs：

 $('a#delete').click(function(e){
    var anchor = this;
    var del_link = '/admin/edit/user/delete/' + $(anchor).attr('user');
    $('#deleteModal').modal('show');
    $('button#confirm').click(function(e){
        $('#deleteModal').modal('hide');
        $.ajax({
            url: del_link,
            success:function(result){
                $(anchor).closest('tr').addClass("error");
                $(anchor).closest('tr').delay(2000).fadeOut();
          }});
    });
    return false;
});

すべての削除リンクに同じdeleteID を使用していますか?

于 2013-01-21T12:35:33.803 に答える
0

.unbind() でクリック イベントのバインドを解除するか、クリック イベントに .one() を実行して、一度だけ実行されるようにします。

$('a#delete').one('click', function(e) {

また

$('a#delete').unbind().live('click', function(e) {
于 2014-03-05T21:20:55.100 に答える