重建模态列表

Question

I am creating a set of pages which have sections loaded dynamically by ajax.

Each loaded ajax page is just html content and contains a modal.

I have tinyMCE editors which had the same problem but I have fixed that one by clearing all editors from the editors array and reloading them.

tinyMCE.editors = [];
tinyMCE.init();

I am looking to do something similar with Bootstrap Modals. I understand that the updated DOM is not known about by bootstrap and that placing a script tag at the end would resolve this issue BUT by doing that, it also introduces problems as the scripts will have been previously loaded for previous parts of the page (multiple loads of the same script).

The reason I am looking to do this is this.

• Create button to open modal
• Modal opens
• Click close or the x on the modal, nothing happens

Closing code:

<button type="button" class="close" data-dismiss="modal">&times;</button>

My opening code:

<a href="#" id="adminAdd" class="adminClicks btn btn-sm btn-success" data-toggle="modal" data-target="#addModal">Add<span class="glyphicon glyphicon-plus"></span></a>

Dialog div:

<div id="addModal" class="modal fade" role="dialog">

Any advice would be great. I have used a modal which works correctly at the highest level where the page is not changed by ajax.

Answer 1

I figured out a workaround instead.

So in the static code which isnt affected by jquery I have created this:

<div id="customModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" id="customModalHeader"></h4>
            </div>
            <div class="modal-body" id="customModalBody">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary pull-left">Add</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

Then I just apply using jQuery any changes I require. I added Id's to the changeable fields so I adjust by:

$("customModalHeader").html("My custom header"); 

in the ajax loaded section between script tags. I could probably include a script file too but this is on the fly changes after all.