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

Question

I'm submitting my data to controller using ajax function which return the result perfectly but the problem is ajax post the data multiple time while click event is fired. Note that, my function structure is in this order:

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

Click event should fire once and ajax request should for that particular record only not with previous cached data (only clicked item)

Answer 1

Don't inline your click events, use variables that are in the same scope to pass the values between the click events

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

Also make sure you are not placing this code in a php loop

Answer 2

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