I use the select2 plugin in my script. If you perform an alert when loading a page, you get this situation

Swal.fire({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!'
}).then(function() {
  Swal.fire(
    'Deleted!',
    'Your file has been deleted.',
    'success'
  );
})

At the same time, if you use the button to display a notification, there is no such problem. How can this be solved?

< button id = " button " >SHOWMODAL< / button >
<script>
    $('#button').click(() => {
Swal.fire({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!'
}).then(function() {
  Swal.fire(
    'Deleted!',
    'Your file has been deleted.',
    'success'
  );
})
});
</script>