事件。PreventDefault();在嵌套的点击函数中不起作用

Question

我正在使用ajax函数将数据提交给控制器，该函数完美地返回结果，但问题是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>