javascript - 与 Bootstrap 按钮关联的 jQuery 函数仅执行一次

Question

我正在使用 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">&times;</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();

   });

});

为什么该函数仅在第一次单击按钮时执行？谢谢!

Answer 1

当您依赖 data-dismiss="alert" 来消除/关闭警报时，警报实际上已从数据模型中删除。因此，当您单击尝试再次slideDown该元素时，该元素不再存在。

要获得所需的行为以重新使用已“解除”的警报消息，您必须删除 data-dismiss 并响应关闭按钮上的点击事件slideUp 或 隐藏 元素。然后您后续的 slideDown 代码将成功找到 DOM 元素。

[编辑] 这是一个 JSFiddle:http://jsfiddle.net/de4qkoe5/