Question

tl; dr：如果动态生成的元素是body，那么如何使点击处理程序可见的DOM元素成为关闭<div id='submodal_1' class='submodal'>foo</div> <div id='submodal_2' class='submodal'>bar</div> </body>之前的最后一个元素被追加？

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

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

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

代码可能更清晰：

这就是页面加载时html的样子：

<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>

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

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

单击打开该模态的子模式后，我必须将子模式移动到主模态下面，否则它将不会出现（并且z-index不会影响此阻塞）：

#primary_modal_1

此时如果你关闭<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>，它将被隐藏但仍然存在于DOM中。如果你打开一秒，代码现在看起来像：

<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>

此时如果您重新打开第一个主模态并尝试打开其子模式，则不会出现子模式。但是，如果将子模式移动到最后一个主模态之下，则如下：

{{1}}

子模式将正确地发挥作用。我想确保子模式总是在DOM中的最后一个，无论附加多少个主模态。

Answer 1

JQuery的附加方法＆＃34;将参数指定的内容插入到匹配元素集中每个元素的末尾。＆＃34;

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

每次动态添加内容时，您都必须移动元素。

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

Answer 2

看一下jQuery appendTo方法。

Answer 3

您可以始终clone元素，append克隆到<body>标记的末尾，然后remove原始元素。

Rob W指出克隆是不必要的，因为调用附加在现有元素上会自动将其从先前位置移除。考虑到这一点，您可以扩展代码以打开一个新的模式窗口来执行以下操作：

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

应该（假设我已正确理解API）将所有子模式元素（由submodal类标识）混洗到<body>标记的末尾。

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

3 个答案: