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

Question

我正在使用 ajax 函数将我的数据提交给控制器，return 结果完美，但问题是 ajax post 数据在点击事件中多次出现被解雇了。请注意，我的函数结构是按以下顺序排列的：

<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>

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

event.PreventDefault(); Doesn't work inside nested onClick function

jquery

laravel-5.7

jquery-click-event