使用ajax和sweet alert调用函数

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>