我正在学习使用Bootstrap 3的教程。到目前为止一切顺利,除了一个非预期的行为:当我单击与 jQuery 函数关联的按钮时,警报显示正常。但是,一旦我关闭它,再次单击该按钮不会执行任何操作,也就是说,看起来它是一个无操作。
为简洁起见,我将包括相关部分。我有以下<div>
:
<div class="row" id="bigCallout">
<div class="col-12">
<div class="alert alert-success alert-block fade in" id="successAlert">
<button type="button" class="close" data-dismiss="alert">×</button>
<h4>Success!</h4>
<p>You just made this element display using jQuery.</p>
</div>
</div>
</div> <!-- end bigCallout -->
下面我包括我的JS文件:
<!-- Custom JS -->
<script src="includes/js/script.js"></script>
上面提到的JS文件包含这个唯一的功能:
$(function() {
$('#alertMe').click(function(e) {
e.preventDefault();
$('#successAlert').slideDown();
});
});
为什么仅在第一次单击按钮时执行函数?谢谢!
当您依赖关闭警报的data-dismiss="alert"
时,警报实际上已从数据模型中删除。因此,当您单击以尝试再次slideDown
该元素时,该元素将不再存在。
若要使所需的行为重用已"消除"的警报消息,必须删除data-dismiss
并响应关闭按钮上的单击事件以slideUp
或hide
元素。然后,后续slideDown
代码将成功找到 DOM 元素。
[编辑] 这是一个JSFiddle:http://jsfiddle.net/de4qkoe5/