Bootstrap 3 Modal stop to work after dom updates

I have this HTML (using Bootstrap 3):

    <div class="container">
        <h2>Bootstrap 3 Modal Example</h2>
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <form id="myForm">
                            <div class="form-group">
                                <label for="name">Name:</label>
                                <input type="text" class="form-control" id="name" name="name">
                            </div>
                            <div class="form-group">
                                <label for="email">Email:</label>
                                <input type="email" class="form-control" id="email" name="email">
                            </div>
                        </form>
      
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="saveBtn">Save</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div id="divText">
    </div>
    </div>

and this JavaScript:

    $(document).ready(function(){
            $('#saveBtn').click(function(){

$('body').append('<div id="spinner" style="position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9999;font-size:5em;color:#000;"><i class="fa fa-spinner fa-spin"></i></div>');

$('#divText').html("<p>Hello world</p>")
                
                 $('#myModal').modal('hide');
                
            });
        });

If I press Save the modal stop to work (the close button not work and also modal(‘hide’) not work).

Can you help me? you can test it using jsfiddle and using on CSS:

@import url('//netdna.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/css/bootstrap-select.min.css');

Thanks

You need to sign in to view this answers

Related Post