Question

我在jQuery中有一个$POST方法，它将id作为数据发送到我的PHP文件，并使用该id从数据库中删除该行。我的问题是每次单击删除按钮时都会多次调用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

尝试使用.one()

.one()方法与.on()相同，只是给定元素和事件类型的处理程序在第一次调用后未绑定。

示例：

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

Answer 2

我猜每次点击删除图像时，你的AJAX调用再次进行一次。这是因为你在删除图像的每次点击时都绑定一个新的事件处理程序，修复它在点击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 3

$(".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();
});

在点击功能结束前添加该行并添加元素e 这将阻止你的点击传播

Answer 4

马上，你在这里点击了两下。可能是问题吗？

是否可能在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,
        success: function(data) {
            if (data == '1') {
                $('#myModal1').modal('hide');
                $('body').removeClass('modal-open');
                $('.modal-backdrop').remove();
                ajaxcall3();
            }
        }
    });
})

如果没有删除它，请尝试在POST之前取消绑定click事件

$(".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');
        }
    });
});

我没有对此进行测试，我只是在我去的时候进行测试。不能保证它会起作用！

修改的括号问题。

$ POST方法多次触发

4 个答案: