显示 Bootstrap 模式时链接的 JavaScript 不起作用答案

【问题标题】：Linked JavaScript not working when Bootstrap modal is shown显示 Bootstrap 模式时链接的 JavaScript 不起作用
【发布时间】：2014-07-26 09:34:32
【问题描述】：

Bootstrap modal 显示后，我的应用 JavaScript 无法正常工作。

当我从控制台执行 JavaScript 时，它可以工作，但我的应用程序 JavaScript 不工作。

有人可以给我建议如何解决这个问题吗？

HTML 文件：

<button type="button" class="btn btn-primary" id="save-category">Save changes</button>

JavaScript 文件：

var jquery = jQuery.noConflict();

jquery(window).load(function() {

jquery('#add-category').click(function() {
    jquery.get('api/categories/add', function(data) {
        jquery('#modal-target').replaceWith(data);
        jquery('#myModal').modal('show');
    });
});

jquery('#save-category').click(function() {
    jquery('#myModal').modal('hide');
});

});

【问题讨论】：

您可能应该包含不起作用的代码。

标签： javascript twitter-bootstrap modal-dialog

【解决方案1】：

这里发生的情况是#save-category 按钮未注册到您在页面首次加载时创建的事件。这是因为 bootstrap 将原来的 DOM 元素移动到了模态窗口，从而丢失了原来的点击事件。

尝试使用委托而不是事件绑定

jquery('#add-category').click(function() {
    jquery.get('api/categories/add', function(data) {
        jquery('#modal-target').replaceWith(data);
        jquery('#myModal').modal('show');
    });
});

jquery(document).on('click', '#save-category', function() {
    jquery('#myModal').modal('hide');
});

【讨论】：

工作，非常感谢！一个建议：Deif 给出了发生这种情况的一些原因。您可以将其包含在您的答案中。

【解决方案2】：

这里发生的情况是#save-category 按钮未注册到您在页面首次加载时创建的事件。这是因为 bootstrap 将原来的 DOM 元素移动到了模态窗口，从而丢失了原来的点击事件。

要解决此问题，您应该在显示模态视图后注册点击事件：

jquery('#add-category').click(function() {
    jquery.get('api/categories/add', function(data) {
        jquery('#modal-target').replaceWith(data);
        jquery('#myModal').modal('show');

        // Register the event here
        jquery('#save-category').click(function() {
            jquery('#myModal').modal('hide');
        });
    });
});

另请注意，load 事件在 jQuery 1.8 中已被弃用，因此您可能希望使用 jQuery(document).ready( 来初始化您的脚本代码，除非您需要等待图像加载。

【讨论】：