时间戳

首页 > 解决方案 > 为什么不能结合 data-dismiss="alert" 和 input type = submit on one input type button

html - 为什么不能结合 data-dismiss="alert" 和 input type = submit on one input type button

问题描述

我有以下代码行应该发送一个发布请求

<input type="submit" class="btn btn-success" name = "accept" value = "Akzeptieren" data-dismiss="alert">

但在我删除 data-dismiss="alert" 之前它不起作用

<input type="submit" class="btn btn-success" name = "accept" value = "Akzeptieren">

为什么它不起作用，有什么方法可以让我同时使用它们吗？

标签： htmlbootstrap-4

解决方案

因为捕获事件的句柄正在停止事件。因此，表单提交事件不会发生。

bootstrap@4.6.0/dist/js/bootstrap.bundle.js#L345

bootstrap@4.6.0/dist/js/bootstrap.bundle.js

我认为您可以通过以下逻辑来克服这一点。

  • 指定私有选择器 ( data-dismiss="alert&submit")
  • 要捕捉我们选择器上的点击，请关闭“ alert”并允许该form|submit事件。

$(function() {
  $('[data-dismiss="alert&submit"]').on('click', function() {
    $('.alert').alert('close');
  });
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>


<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<form>
  <input type="submit" class="btn btn-success" name="accept" value="Akzeptieren" data-dismiss="alert&submit">
</form>

推荐阅读