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

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)

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