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

Question

After Bootstrap modal is shown, my app JavaScript is not working.

When I execute JavaScript from console then it is working, but my app JavaScript does not work.

Can somebody please give me advice how I can solve this issue?

HTML file:

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

JavaScript file:

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

What is happening here is that the #save-category button is not registered to the event that you made when the page first loads. This is because bootstrap moves the original DOM element to the modal window, thus losing the original click event.

To fix this, you should register your click event to after you show your modal view:

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

Also note that the load event has been deprecated in jQuery 1.8 so you might want to use jQuery(document).ready( for initialising your script code unless you need to wait for images to load.

Answer 2

What is happening here is that the #save-category button is not registered to the event that you made when the page first loads. This is because bootstrap moves the original DOM element to the modal window, thus losing the original click event.

Try to use delegate instead of event binding

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