jQuery - 即使在动态生成的元素之后,在DOM中(在关闭正文之前)使元素成为最后一个元素

Question

tl; dr:body即使是动态生成的元素被追加,我如何获得一个由单击处理程序可见的DOM元素作为关闭之前的最后一个元素？

基本上我想让打开元素的点击也在DOM中移动它,即使在附加了一些动态元素之后,它也会在身体关闭之前移动到最后.

---

我的问题源于在另一个模态中打开的模态,而在一个页面上有多个模态.一个问题是,子页面在页面加载时存在于DOM中,而主要模态正在被实例化(子模块使用不同的代码生成,而主模式使用jQuery UI对话框).

如果你打开一个模态,然后打开子模式一切都很好.如果打开第二个模态然后在重新打开第一个模态时将其关闭,则子模块将不会显示,因为它隐藏在第二个模态下方.如果我将这些子模型附加到正文中,从而将它们放在任何生成的模态之后它们看起来很好(但这会产生其他问题).尽管它看起来似乎不是一个z-index问题(我已经尝试了与之相关的一切而没有运气),但它似乎与这些模态在DOM中的位置有关.

代码可能更清晰:

这是页面加载时html的样子:

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

单击以打开第一个主模式窗口后:

<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的最后.

Answer 1

JQuery的append方法"将由参数指定的内容插入到匹配元素集合中每个元素的末尾."

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

每次动态添加某些内容时,您都必须移动该元素.

检查这个JSFiddle:http: //jsfiddle.net/eZ2Dq/