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

由于您输入的内容为const data =['A','B','C']; describe('Client.App.ProfileComponent', () => { let component: ProfileComponent; let fixture: ComponentFixture<ProfileComponent>; let profileService: jasmine.SpyObj<ProfileService>; beforeEach(async(() => { // create a spied service and use it inside providers array profileService = jasmine.createSpyObj('ProfileService', ['login', 'getData']); TestBed.configureTestingModule({ imports: [HttpClientTestingModule, ReactiveFormsModule, RouterTestingModule], declarations: [ProfileComponent], providers: [ { provide: ProfileService, useValue: profileService ], schemas: [NO_ERRORS_SCHEMA] }).compileComponents(); // provide fake implementation to service methods profileService.login.and.returnValue(Promise.resolve('success')); profileService.getData.and.returnValue(of(data)); // of is rxjs operators- import fixture = TestBed.createComponent(ProfileComponent); component = fixture.componentInstance; fixture.detectChanges(); })); it('shall create the component', () => { expect(component).toBeDefined(); }); });，因此默认情况下将提交表单。为了防止这种默认行为，您可以在点击处理程序中调用type="submit"，或者更适当地将输入设置为e.preventDefault()，因为您不打算使用此按钮提交表单。接下来，库 type="button" 似乎有一个onok事件，您可以使用该事件检查用户是否已确认，然后可以使用该事件手动调用表单的Submit函数< em> 用户按下OK后，请参见下面的可运行代码片段以获取工作示例：

alertify

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

注意：：最初，我忘记将 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/alertify.min.css" />  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/css/themes/default.min.css" />  <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应设置为true。了解更多here

弹出后，Alertify警报就会消失

1 个答案: