javascript - Alertify 警报弹出后立即消失

Question

我构建了一个快速应用程序，最后，我为应用程序中的一个删除按钮添加了警报。然而，在我点击“确定”之前，警报就消失了。

这是我的删除表单

<form
  action="/grades/<%=grade._id%>?_method=DELETE"
  method="POST"
  class="delete-form"
>
  <input
    type="submit"
    class="btn btn-danger mt-3"
    value="Delete Class"
    id="delBotton"
  />
</form>

这是我的 main.js 文件:

const delBtn = document.getElementById('delBotton');

delBtn.addEventListener('click', () =>
  alertify.alert('This is an alert dialog.', function () {
    alertify.message('OK');
  })
);

最后，这是我的删除路线:

router.delete('/:id', middleware.checkGradeOwnership, (req, res) => {
  Grade.findByIdAndRemove(req.params.id, (err) => {
    try {
      res.redirect('/grades');
    } catch (err) {
      res.redirect('/grades');
      console.log(err);
    }
  });
});

如何解决这个问题？

Answer 1

由于您的输入具有type="submit"，因此默认情况下会提交表单。为了防止这种默认行为，您可以在点击处理程序中调用 e.preventDefault() ，或者更合适地将输入设置为 type="button" 因为您不这样做不打算使用此按钮提交表单。接下来，库 alertify 似乎有一个 onok您可以使用该事件来检查用户是否已确认，然后您可以使用该事件在用户按下“确定”后手动调用表单的提交函数，请参阅下面的可运行代码片段以获取工作示例:

const delForm = document.getElementById('delForm');
const delBtn = document.getElementById('delBotton');

delBtn.addEventListener('click', () => {
  alertify.alert('This is an alert dialog.', () => {
    alertify.message('OK');
  }).set({ 'invokeOnCloseOff': true, 'onok': () => delForm.submit()})
});

<!-- CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a3b363f282e333c2330291a6b746b69746b" rel="noreferrer noopener nofollow">[email protected]</a>/build/css/alertify.min.css" />
<!-- Default theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c1a0ada4b3b5a8a7b8abb281f0eff0f2eff0" rel="noreferrer noopener nofollow">[email protected]</a>/build/css/themes/default.min.css" />
<!-- JavaScript -->
<script src="//cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aecfc2cbdcdac7c8d7c4ddee9f809f9d809f" rel="noreferrer noopener nofollow">[email protected]</a>/build/alertify.min.js"></script>

<form action="/grades/<%=grade._id%>?_method=DELETE" method="POST" class="delete-form" id="delForm">
  <input type="button" class="btn btn-danger mt-3" value="Delete Class" id="delBotton" />
</form>

注意:最初我忘记将 invokeOnCloseOff 设置为 true，但这似乎会导致 onok无论用户是否按下“确定”按钮，都会触发事件。如果您想区分单击“确定”按钮和以其他类型的方式关闭警报模式，则应将 invokeOnCloseOff 设置为 true。了解更多 here