Question

显示Bootstrap模式后，我的应用程序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');
});

});

Answer 1

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

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

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');
        });
    });
});

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

Answer 2

这里发生的事情是＃save-category按钮没有注册到您首次加载页面时所做的事件。这是因为bootstrap将原始DOM元素移动到模态窗口，从而丢失了原始的click事件。

尝试使用委托代替事件绑定

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');
});

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

2 个答案: