Question

我正在使用ajax函数将数据提交给控制器，该函数完美地返回结果，但是问题是在触发click事件时，ajax多次发布数据。请注意，我的功能结构是这样的：

<script>
$(document).ready(function(){
  $(document).on('click','.editapp', function() {
    // ................
    $(document).on('click','.JustClick', function(e){
      // .................
    })
  })
});
</script>
<script>
$(document).ready(function() {
  $(document).on('click', '.editapp', function() {
    var app = $(this).attr('data-target');
    var appeal_id = $(app).find('input[name="appeal_id"]').val();
    var dataStr = 'appeal_id=' + appeal_id;

    $(document).on('click', '.JustClick', function(e) {
      e.preventDefault(); // default action us stopped here   
      $.ajax({
        url: "/swalReturn/" + appeals_id,
        type: 'POST',
        //dataType: 'application/json',
        data: dataStr,
        cache: false,
        success: function(data) {
          Swal({
            title: 'Prison History',
            type: 'info',
            html: data,
          })
        },
        error: function(xhr, ajaxOptions, thrownError) {
          swal("Error!", "Check your input,Please!", "error");
          $('.editapp').modal('hide');
        }
      });
    });

  });
});
</script>

点击事件应该触发一次，并且针对该特定记录的ajax请求应该仅与先前的缓存数据（仅单击的项目）不相关

Answer 1

不要内联点击事件，请使用范围相同的变量在点击事件之间传递值

<script>
  $(document).ready(function() {
    var app, appeal_id, dataStr;
    $(document).on('click', '.editapp', function() {
      app = $(this).attr('data-target');
      appeal_id = $(app).find('input[name="appeal_id"]').val();
      dataStr = 'appeal_id=' + appeal_id;

    });
    $(document).on('click', '.JustClick', function(e) {
      e.preventDefault(); // default action us stopped here   
      $.ajax({
        url: "/swalReturn/" + appeals_id,
        type: 'POST',
        //dataType: 'application/json',
        data: dataStr,
        cache: false,
        success: function(data) {
          Swal({
            title: 'Prison History',
            type: 'info',
            html: data,
          })
        },
        error: function(xhr, ajaxOptions, thrownError) {
          swal("Error!", "Check your input,Please!", "error");
          $('.editapp').modal('hide');
        }
      });
    });
  }); </script>

还要确保您没有将此代码放置在php循环中

Answer 2

<script>
$(document).ready(function(){
$(document).on('click','.editapp', function() {
................
   $(document).one('click','.JustClick', function(e){ //.one() method solved my issue
.................
  })
})
});
</script>

Answer 3

我和你有同样的问题。每次我单击按钮时，ajax都会提交5次。我通过下载underscore.js并在其上添加了反跳功能解决了该问题。

像这样

<script>
$(document).ready(function(){
$(document).on('click','.editapp', function() {
................
   $(document).on('click','.JustClick', function(e){
.................
  })
})
});
</script>
<script>
$(document).ready(function(){
$(document).on('click','.editapp', function() {
    var app = $(this).attr('data-target');
    var appeal_id = $(app).find('input[name="appeal_id"]').val();  
    var dataStr = 'appeal_id='+ appeal_id;
    $(document).on('click','.JustClick', _.debounce(function(e){    
        e.preventDefault(); // default action us stopped here   
             $.ajax({
                        url: "/swalReturn/"+appeals_id,
                        type: 'POST',
                        //dataType: 'application/json',
                        data: dataStr,
                        cache: false,
                        success: function (data) {
                            Swal({
                                title:'Prison History',
                                type: 'info',
                                html: data,
                            })
                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            swal("Error!", "Check your input,Please!", "error");
                            $('.editapp').modal('hide');
                        }
                    });
                   }), 500);                      
                });
    });
</script>

您需要将underscore.js放在此脚本之前。您可以在documentation

中了解有关防抖动的更多信息

希望有帮助！

event.PreventDefault（）;在嵌套的onClick函数中不起作用

3 个答案: