2

我已经构建了一个快速应用程序，最后，我为应用程序中的一个删除按钮添加了一个警报。但是，即使在我可以单击“确定”之前，警报也会消失。

这是我的删除表格

<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);
    }
  });
});

我怎样才能解决这个问题？

4

1 回答 1

3

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

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为，但无论用户是否按下 OK 按钮true，这似乎都会导致事件触发。如果您想区分单击“确定”按钮和以其他方式关闭警报模式，则应将 设置为 true onok。在这里invokeOnCloseOff阅读更多

于 2020-09-01T14:02:03.400 回答