jQuery的「replaceWith」不「上」

代碼裏面工作： http://jsfiddle.net/z1ot7c2g/12/jQuery的「replaceWith」不「上」

var DomTreeCopyWithRows = $(".crops #tiles").clone(true, true); 

    $(document).on("click", ".mod", function(){ 
     //if there is any other opened, restore original DOM order 
     $('.crops #tiles').replaceWith(DomTreeCopyWithRows); 

     $this = $(this); 
     //detect which tile's clicked 
     var clickedModClass = "." + $this.children(".content").attr("class").split(' ')[1]; 

     //move content to after the nearest row wrapper 
     $(clickedModClass).closest(".row").after($(clickedModClass)); 
     //open 
     $(clickedModClass).addClass("opened").show(); 
     $(clickedModClass).animate({ 
      height : $(clickedModClass)[0].scrollHeight 
     },"slow"); 

     return false; 
    });

我有上單擊模塊的一排下面打開可展開的面板響應瓷磚電網。依賴於屏幕的行可能是1，2，3或者更多的模塊，它們在動態添加的.row包裝器中。
點擊模塊的內容從.mod中取出，並在.row後直接連接。
一次只能打開一個。問題：當您第二次點擊時，爲了關閉已打開的其他模塊的內容並將其放回到其他.mod中，我使用$('.crops #tiles').replaceWith(DomTreeCopyWithRows)來放入先前保存的DOM結構。

問題：

$('.crops #tiles').replaceWith(DomTreeCopyWithRows) doesn't work.

我仍然得到多個打開的集裝箱。

DOM替換工作$(".crops #tiles").click，但我不能在DOM替換髮生後保留我的點擊事件附件。

任何想法，將不勝感激，謝謝。

來源

2015-01-09 GeneticallyModified

你能解釋它是如何打算從用戶的角度來看，工作PLS？ – Tsar

沙皇，當用戶點擊一個盒子，它打開一個容器，其中點擊的框的行下方的內容。當下一個框被點擊時，第一個框自動關閉，下一個框會產生一個直接出現在框所在行下方的下拉容器。 – GeneticallyModified

T.J.如果我不是很清楚道歉，這是我的第一篇文章。在Fiddler中，當您單擊每個框時，只會出現一個下拉框，因此一次只能打開一個下拉框。點擊其他每個框後，已打開的下拉菜單會自動關閉。問題在於：DomTreeCopyWithRows沒有放在點擊。 var DomTreeCopyWithRows = $（「。crops #tiles」）。clone（）; （如果有其他打開的，恢復原始DOM順序） $（document。）（「click」，「.mod」，function（）{ $（'。crops #tiles'）。replaceWith（DomTreeCopyWithRows ）; – GeneticallyModified

它不工作的原因是，一旦你做你的DomTreeCopyWithRows引用的replaceWith一次，節點是DOM中的，所以它們是那些得到修改的人。而且，每次點擊時都會這樣做，因此第一次將您的副本放入DOM中，並保留下來，並由後續代碼進行修改。

最小，變化的解決辦法是重新克隆加時：

$('.crops #tiles').replaceWith(DomTreeCopyWithRows.clone(true, true)); 
// -----------------------------------------------^^^^^^^^^^^^^^^^^^

Updated Fiddle

來源

2015-01-09 11:54:59

謝謝，它的工作原理！ – GeneticallyModified

jQuery的「replaceWith」不「上」

回答

相關問題