Alertify 警报弹出后立即消失

Question

我构建了一个快捷应用程序，最后，我为应用程序中的一个删除按钮添加了一个提醒。但是，甚至在我单击 'ok' 之前警报就消失了。

这是我的删除表单

<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/alertifyjs@1.13.1/build/css/alertify.min.css" />
<!-- Default theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/default.min.css" />
<!-- JavaScript -->
<script src="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/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 事件触发用户是否按下 OK 按钮。如果您想区分单击确定按钮和以某种其他类型的方式关闭警报模式，则应将 invokeOnCloseOff 设置为 true。阅读更多 here

Alertify 警报弹出后立即消失

Alertify alerts vanishes right after popping up

javascript

node.js

express

alertify

alertifyjs