如何防止多个ajax？

When I click delete button, ajax of detail button called too. So how to prevent multiple ajax?

<div id="detail_message" data-id="{{ $value->message->id }}">
  <i class="fa fa-trash icon col-6" aria-hidden="true"style="font-size: 20px; color: #5b5b5b" id="delete_message" data-id="{{ $value->message->id }}"></i>
</div>

$('#delete_message').click(function(event){
    event.preventDefault();
    var id = $(this).attr('data-id');

    $.ajax({
      url: '{{ url("message/delete_message") }}/'+id,
      type: 'GET',
      success: function(data){
        alert('Message Deleted Successfully');
      }
    })      
  });

 $('#detail_message').click(function(event){
    event.preventDefault();
    var id = $(this).attr('data-id');

    $.ajax({
      url: '{{ url("message/detail_message") }}/'+id,
      type: 'GET',
      success: function(data){
        $('#content-message').html(data);
      }
    })      
  });

Add event.stopPropagation() on your delete-message click event.

$('#delete_message').click(function(event){
    event.preventDefault();
    event.stopPropagation(); 
    var id = $(this).attr('data-id');

    $.ajax({
      url: '{{ url("message/delete_message") }}/'+id,
      type: 'GET',
      success: function(data){
        alert('Message Deleted Successfully');
      }
    })      
  });

Explanation: When the delete-message button is clicked the event gets triggered and keeps bubbling up to all its parent divisions. event.stopPropagation() stops the bubbling up of events and the parent division event doesn't get triggered when the child is clicked.