使用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>