How to prevent ajax request before clicking on OK button of onclick="confirm(' ')" message?

$(document).ready(function(){
            $(document).on('click', '.dlt', function () {
                var id = $(this).attr('data-id');
                var token= '';
                $.ajax({
                   method: 'post',
                   url: '',
                   data: {id:id, _token:token},
                   success: function (response) {
                       location.reload();
                   }
                });

            });

        });

<tbody>
@if($products->count()>0)
    @foreach($products as $product)
      <tr>
          <td class="p_name"></td>
          <td class="p_details"></td>
          <td class="p_price"></td>
          <td><a class="add" data-id="" title="Add" data-toggle="tooltip" style="display: none"><i class="fa fa-book"></i></a>
              <a class="edit" title="Edit" data-toggle="tooltip"><i class="fa fa-edit"></i></a>
              <a class="dlt" onclick="confirm('Are you sure to delete it?')" title="Delete" data-toggle="tooltip" data-id=""><i class="fa fa-trash"></i></a>
          </td>
      </tr>
    @endforeach
@else
    <tr>
        <td colspan="4" class="text-center bg-danger">No Product Data Found</td>
    </tr>
@endif
</tbody>

Although I click on Cancel button of Confirm() message, but onclick ajax request already done. How to prevent it until I click on OK button of confirm() message?

via Chebli Mohamed