Question

https://getbootstrap.com/docs/4.0/components/alerts/

我是关于bootstrap 4.0的新手，我正在阅读文档，我找到了这个方法：

$('.alert').alert()

发出警报，侦听后代元素上的点击事件有数据解雇=＆＃34;警告＆＃34;属性。（使用时不需要 data-api的自动初始化。）

因此，为了测试此方法，我尝试了以下代码：

$(document).off('.alert.data-api'); // worked
$('.alert').alert(); // do nothing!

<div id='mydiv' class="alert alert-warning alert-dismissible fade show" role="alert">
text
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
</button>
</div>

alert（）方法什么也没做！按钮仍然不起作用！所以我的问题是，为什么它不起作用？

Answer 1

我想你可能会误解$(selector).alert()的用法。在没有任何参数的情况下调用alert函数只会告诉bootstrap监听包含data-dismiss="alert"的 children 元素的点击次数 - 请参阅下面的示例。

在您的示例中，您不会关闭“myDiv”，这就是您的代码无法运行的原因，因为关闭按钮不在警报div中。

$(function() {
  $('#alertDiv').alert()
})

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">


<div id='alertDiv' class="alert alert-warning alert-dismissible fade show" role="alert">
  Alert Message!
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

没有参数的bootstrap警报方法

1 个答案: