функция вызова с ajax и сладким оповещением

Question

Я не понимаю, как вызвать эту функцию, когда я нажимаю на текст BTN. Единственный способ, который работает, это (async () => {, я попробовал это $(document).ready(function() { $('#demo').submit(function(e) {, но не работает.

(async () => {

const { value: file } = await Swal.fire({
  title: 'Select image',
  input: 'file',
  inputAttributes: {
    'accept': 'image/*',
    'aria-label': 'Upload your profile picture'
  }
})

if (file) {
  const reader = new FileReader()
  reader.onload = (e) => {
    Swal.fire({
      title: 'Your uploaded picture',
      imageUrl: e.target.result,
      imageAlt: 'The uploaded picture'
    })
  }
  reader.readAsDataURL(file)
}

})()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

<button class="form-control cal "  id="demo">
          Try me!
        </button>

Answer 1

Просто поместите модал в функцию, а затем вызывайте ее, когда захотите. В этом примере показан начальный и onclick вызов.

const modal = async function () {

const { value: file } = await Swal.fire({
  title: 'Select image',
  input: 'file',
  inputAttributes: {
    'accept': 'image/*',
    'aria-label': 'Upload your profile picture'
  }
})

if (file) {
  const reader = new FileReader()
  reader.onload = (e) => {
    Swal.fire({
      title: 'Your uploaded picture',
      imageUrl: e.target.result,
      imageAlt: 'The uploaded picture'
    })
  }
  reader.readAsDataURL(file)
}

};

// initial modal call
modal();

// even modal call
$("#demo").click(modal);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

<button class="form-control cal "  id="demo">
          Try me!
        </button>