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

jQuery function associated with Bootstrap button is executed only once

本文关键字：执行 一次 函数 按钮 Bootstrap 关联 jQuery      更新时间：2023-09-26

我正在学习使用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();
   });
});

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

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

若要使所需的行为重用已"消除"的警报消息，必须删除data-dismiss并响应关闭按钮上的单击事件以slideUp或hide元素。然后，后续slideDown代码将成功找到 DOM 元素。

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

相关文章：