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

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元素移动到了模态窗口，从而丢失了原来的点击事件。

尝试使用委托(delegate)而不是事件绑定(bind)

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