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或hide元素。然后您的后续slideDown代码将成功找到DOM元素。

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

与Bootstrap按钮关联的jQuery函数只执行一次

1 个答案: