Geek Answers Handbook

JQuery - make an element last in the DOM (before closing the body) even after dynamically generated elements

tl; dr: How to get a DOM element that becomes a visible click handler, the last element before closing body, even if dynamically generated elements are added?

Essentially, I want the click that opens the element to also move it to the DOM to be the last, until the body closes even after adding some dynamic elements.

My problem is with the modal, which opens as part of another modal mode, while there are several modals on the same page. One catch is that submodules exist in the DOM when the page loads, while primary modal objects are created in onclick mode (submodules use different code to generate, while primary ones use the JQuery UI dialog).

If you open a modal and then open a submodule, all is well. If you open the second modal, then close it when you open this first modal submodal again, which will not appear because it is hidden under the second modal. If I add these submodules to the body, thus putting them after any generated modals, they look normal (but this creates other problems). Although this seems like it is not a z-index problem (I tried everything related to this, no luck), it seems to be related to where these modals are located in the DOM.

The code may be clearer:

Here is what html looks like when loading a page:

<div id='submodal_1' class='submodal'>foo</div>
<div id='submodal_2' class='submodal'>bar</div>
</body>

After you click to open the first main modal window:

<div id='submodal_1'>subfoo</div>
<div id='submodal_2'>subbar</div>
<div id='primary_modal_1' class='ui-dialog' style='display:block'>foo</div>
</body>

, , , , (, -, z-index ):

$('#submodal_1').insertAfter('#primary_modal_1');

, #primary_modal_1, , DOM. , :

<div id='submodal_2' class='submodal'>subbar</div>
<div id='primary_modal_1' class='ui-dialog' style='display:none'>foo</div>
<div id='submodal_1' class='submodal'>subfoo</div>
<div id='primary_modal_2' class='ui-dialog' style='display:block'>bar</div>
</body>

, , . , , :

<div id='submodal_2' class='submodal'>subbar</div>
<div id='primary_modal_1' class='ui-dialog' style='display:block'>foo</div>
<div id='primary_modal_2' class='ui-dialog' style='display:none'>bar</div>
<div id='submodal_1' class='submodal'>subfoo</div> //<-- moved this line
</body>

. , DOM, , .

+5
3

JQuery " , , ".

$('body').append(...);

, - .

JSFiddle: http://jsfiddle.net/eZ2Dq/

+6

jQuery appendTo.

+3

clone append <body>, remove .

Rob W , , - append , . , , , - :

$('.submodal').appendTo('body');

which should (provided I understand the API correctly) shuffle all the submodal elements (identified by the class submodal) to the end of the tag <body>.

+1
source

More articles:


All Articles