jQuery - 即使在動態生成元素之後，DOM中的元素最後一個元素（在關閉主體之前）

tl; dr：如何獲取由單擊處理程序可見的DOM元素作爲最後一個元素元素body關閉之前即使動態生成的元素被追加？jQuery - 即使在動態生成元素之後，DOM中的元素最後一個元素（在關閉主體之前）

本質上，我想要打開該元素的點擊也將其移動到DOM中，以便在添加一些動態元素之後在body關閉之前保持最後。

我的問題源於在另一個模態中打開的模態，同時在一個頁面上有多個模態。一個問題是子頁面存在於頁面加載的DOM中，而主要模塊正在實例化onclick（子模塊使用不同的代碼來生成，而主要模塊使用jQuery UI對話框）。

如果你打開一個模式，然後打開submodal一切都很好。如果你打開第二個模態，那麼當你重新打開第一個模態時關閉它，這個子模態不會出現，因爲它隱藏在第二個模態下面。如果我將這些子方法附加到身體上，從而將它們放在任何生成的模態之後，它們顯得很好（但會產生其他問題）。儘管它看起來似乎並不是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>

在這一點上，如果你重新打開第一初級模式，並嘗試打開它submodal的submodal將不會出現。但是，如果您將子模式移到最後一個主模態下，如下所示：

<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中，而不管附加了多少個主模式。

來源

2012-02-10 Stuart

JQuery的追加方法「將由參數指定的內容插入匹配元素集合中每個元素的末尾。」

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

您必須在每次動態添加內容時移動元素。

入住此的jsfiddle： http://jsfiddle.net/eZ2Dq/

來源

2012-02-10 15:58:24 FMaz008

這對於已經在DOM中但不是爲動態添加的元素適用。動態添加的模塊在創建時將在DOM中保留。 – Stuart 2012-02-10 16:00:10

我正在使用JSFiddle ... – FMaz008 2012-02-10 16:02:50

完成後，您可以檢查JSFiddle的POC :) – FMaz008 2012-02-10 16:09:40

你總是可以clone元素，append克隆到<body>標籤的結尾，然後remove原始元素。

Rob W指出克隆是不必要的，因爲調用附加在現有元素上會自動將它從前一個位置移除。考慮到這一點，你可以擴展你的代碼，打開一個新的模式窗口中做這樣的事情：

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

應（假設我已經正確理解API）打亂所有submodal元素（通過鑑定submodal類）到<body>標記的末尾。

來源

2012-02-10 15:59:17

克隆是不需要的。當追加一個元素時，它將從之前的位置移除。 – 2012-02-10 15:59:59

@RobW很高興知道，謝謝。我不能說我曾經需要追加一個已經存在的元素，所以它不是我真正研究過的。 – 2012-02-10 16:02:07

看看jQuery appendTo方法。

來源

2012-02-10 16:02:21

jQuery - 即使在動態生成元素之後，DOM中的元素最後一個元素（在關閉主體之前）

回答

相關問題