爲什麼在克隆DIV中的SELECT在刷新時有錯誤的行爲？

我使用jQuery Mobile的.clone（）函數來克隆表單中的div，以便我可以有可重複的部分，但是現在我遇到了嵌套選擇的問題。
一旦div被克隆並且嵌套的選擇被更新爲新的id，在下一次「刷新」之後會發生一些奇怪的事情。爲什麼在克隆DIV中的SELECT在刷新時有錯誤的行爲？

會發生什麼事是很奇怪的，選擇只需雙擊並把自身內部現有的選擇，這樣的結果是這樣的：

Strange behavior with JQM and cloned selects

瀏覽器是Safari瀏覽器，我沒有做任何測試其他瀏覽器，因爲我只需要這個代碼在Safari上工作。

我所做的克隆DIV是：

var div = $.mobile.activePage.find('.repeatable').last().clone();

克隆，然後我更新的ID：

var newValue = pid +'-' + index; 
$(this).attr('id', newValue); 
$("label[for='"+ old +"']").attr('for', newValue);

，並在結束時，我刷新所有選擇有合適選擇一次.VAL值（）被調用：

if ($(this).data('role') === 'select') { 
    $(this).selectmenu(); 
    $(this).selectmenu('refresh'); 
}

的問題發生時的代碼的最後一部分被調用。在選擇正確顯示之前，但無法正常工作，一旦刷新了選擇，它將以正確的方式開始工作，但由於已經加倍並放置爲原始元素的子元素，UI會被混淆。

我添加了DIV以下列方式，克隆按鈕之前：

$('#clone_button').before(div);

可以採取什麼這個問題的由來？

編輯：看起來這可能是jQuery Mobile的一個bug：example。

來源

2012-10-18 bontoJR

您是否將克隆插入某處？即使用'.appendTo（）'，如[文檔]（http://api.jquery.com/clone/）所示。 – Calavoow

是的，我編輯了我的問題 – bontoJR

我終於找到了一個解決此問題的。目前，jQuery mobile不支持可擴展項目的克隆。

要做到這一點，唯一的方法是手動編輯和修復克隆的div，刪除選擇周圍的樣式項並將其隔離。

我們已經做的很簡單，但棘手：

導航帶班的所有div ui-select
推斷嵌套SELECT刪除無用的標籤
附加的的HTML代碼SELECT之前或之後ui-select DIV
刪除ui-select DIV
追加可重複的DIV
在父項中調用trigger('create')重新生成正確的樣式。

它很混亂，但它的工作原理。我已更新example in JSFiddle。（編輯：arschmitz的另一個很好的解決方案，在JSFiddle）

P.S.如果您使用的是標籤，請將它們保存在某個地方，然後將它們重新添加到正確的位置。

來源

2012-10-19 13:39:48 bontoJR

謝謝！我遇到了同樣的問題 –

似乎.find（）是你的問題。使用兒童（）已解決了「錯誤」更新的jsfiddle太

function cloneRepeatableGroup() { 
var div = $.mobile.activePage.find('.repeatable').last().clone(); 
div.children('select').each(function() { 
    var element = $(this); 
    var index = element.attr('id'); 
    index++; 
    element.attr('id', index); 


    element.selectmenu(); 
    element.selectmenu('refresh'); 
}); 

$('#clone_button').before(div); 
} 

$("#clone_button").click(function(){ 
cloneRepeatableGroup(); 
});

http://jsfiddle.net/7jGcw/2/

來源

2012-10-19 08:42:45

我已經試過這個解決方案，但不幸的是，使用這種方法，克隆的SELECT不會更新其狀態，如果選定的項目更改。 – bontoJR

爲什麼在克隆DIV中的SELECT在刷新時有錯誤的行爲？

回答

相關問題