$ POSTメソッドが複数回起動されています

Question

私はidをデータとしてPHPファイルに送信し、そのIDを使用してデータベースからその行を削除するjQueryで$POSTメソッドを使用しています。私の問題は、削除ボタンをクリックするたびにPOSTメソッドが複数回呼び出されるということです。

ここにコードがあります。

$(".dash-wrapper .display-class").on('click', '.member-list-div .all-member-box .member-content-shell .single-row .action-column .action-holder .delete-image', function() { 

    var div_id = $(this).closest('[id]').attr('id'); 
    //$(".dash-wrapper .display-class .member-list-div .all-member-box .member-content-shell .modal .modal-content") 
    $(".dash-wrapper .display-class").on('click', '#yes1', function() { 
    $.post("delete.php", { 
     id1: div_id 
    }, function(data) { 
     if (data == 1) { 
     $('#myModal1').modal('hide'); 
     $('body').removeClass('modal-open'); 
     $('.modal-backdrop').remove(); 
     ajaxcall3(); 
     } else { 

     } 
    }) 
    }); 
}); 

Answer 1

私は推測あなたが削除画像をクリックするたびに、あなたのAJAX呼び出しが1人のより多くの時間を作っている。これは、削除イメージのクリックごとに新しいイベントハンドラをバインドして、clickをクリックしてからdelete-imageをバインドし、グローバル変数を使用してidを割り当てたり、クリックハンドラをバインド解除するたびにアンバインドするためです以下：

$(".dash-wrapper .display-class").on('click', '.member-list-div .all-member-box .member-content-shell .single-row .action-column .action-holder .delete-image', function() { 

    var div_id = $(this).closest('[id]').attr('id'); 
    $(".dash-wrapper .display-class").off('click', '#yes1'); 
    $(".dash-wrapper .display-class").on('click', '#yes1', function() { 
    $.post("delete.php", { 
     id1: div_id 
    }, function(data) { 
     if (data == 1) { 
     $('#myModal1').modal('hide'); 
     $('body').removeClass('modal-open'); 
     $('.modal-backdrop').remove(); 
     ajaxcall3(); 
     } 
    }) 
    }); 
}); 

Answer 2

 
$(".dash-wrapper .display-class").on('click', '.member-list-div .all-member-box .member-content-shell .single-row .action-column .action-holder .delete-image', function(){ 


}); 


//$(".dash-wrapper .display-class .member-list-div .all-member-box .member-content-shell .modal .modal-content") 
$(".dash-wrapper .display-class").on('click', '#yes1', function(e){ 

var div_id = $(this).closest('[id]').attr('id'); 
    $.post("delete.php", { 
     id1: div_id 
    }, function(data){ 
     if(data==1){ 
     $('#myModal1').modal('hide'); 
     $('body').removeClass('modal-open'); 
     $('.modal-backdrop').remove(); 
     ajaxcall3(); 
     }else{ 
     return false; 
     } 
    } 
) 
    e.preventDefault(); 
}); 

.one()方法が同一である.one()

で試してみてください、これはあなたのクリックの伝播を停止しますでも

Answer 3

をあなたのクリック機能の近くに前にその行を追加し、要素e を追加.on()になります。ただし、指定された要素とイベントタイプのハンドラは、最初の呼び出し後にバインドされません。

は

例：

$("#foo").one("click", function() { 
    alert("This will be displayed only once."); 
}); 

Answer 4

すぐにバットをオフにすると、ここに2つのクリックがあります。それが問題になるかもしれませんか？

ajaxcall3（）にループが作成されている可能性はありますか？

あなたは一度クリックする必要があるたびに2回クリックするような人ではありませんか？

マウスドライバやマウス自体に問題はありますか？

すべてのコードがなければ、私はちょうどそれが愚かなものだと仮定しようとしていますので、まずクリック時に余分な部分を削除してみてください。

 
$(".dash-wrapper .display-class").on('click', '.member-list-div .all-member-box .member-content-shell .single-row .action-column .action-holder .delete-image', function(){ 

    var div_id = $(this).closest('[id]').attr('id'); 

    $.ajax({ 
     type: "POST", 
     url: "delete.php", 
     data: "id1="+div_id, 
     dataType: "text", 
     async: true, 
     success: function(data) { 
      if (data == '1') { 
       $('#myModal1').modal('hide'); 
       $('body').removeClass('modal-open'); 
       $('.modal-backdrop').remove(); 
       ajaxcall3(); 
      } 
     } 
    }); 
}) 

それはそれをカットしていない場合は、

 
$(".dash-wrapper .display-class").on('click', '.member-list-div .all-member-box .member-content-shell .single-row .action-column .action-holder .delete-image', function(){ 

    var div_id = $(this).closest('[id]').attr('id'); 

    $.ajax({ 
     type: "POST", 
     url: "delete.php", 
     data: "id1="+div_id, 
     dataType: "text", 
     async: true, 
     beforeSend: function() { 
      $('.member-list-div .all-member-box .member-content-shell .single-row .action-column .action-holder .delete-image').unbind('click'); 
     }, 
     success: function(data) { 
      if (data == '1') { 
       $('#myModal1').modal('hide'); 
       $('body').removeClass('modal-open'); 
       $('.modal-backdrop').remove(); 
       ajaxcall3(); 
      } 
     }, 
     complete: function() { 
      $('.member-list-div .all-member-box .member-content-shell .single-row .action-column .action-holder .delete-image').bind('click'); 
     } 
    }); 
}); 

を投稿する前に、クリックイベントのバインドを解除してみてください、私はこれをテストしていない、と私が行くように私はこれを作ってるんです。それが動作する保証はありません！

編集 括弧の問題。