javascript - 不带参数的引导警报方法

Question

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

我是 bootstrap 4.0 的新手，我正在阅读文档，我发现了这个方法:

$('.alert').alert()

Makes an alert listen for click events on descendant elements which have the data-dismiss="alert" attribute. (Not necessary when using the data-api’s auto-initialization.)

为了测试这个方法，我尝试了以下代码:

$(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()的用法。调用不带任何参数的警报函数只是告诉 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>