container.children不whitin JQM的事件函數工作

Question

<fieldset data-role='controlgroup' id='V14'> 
<input id ='V14_1' type='radio' name='V14' value='1'><label for='V14_1'>UNO</label> 
<input id ='V14_2' type='radio' name='V14' value='2'><label for='V14_2'>DOS</label> 
<input id ='V14_3' type='radio' name='V14' value='3'><label for='V14_3'>TRES</label> 
</fieldset> 

我只是想用這個功能，它完美的作品單選按鈕來進行排序：

var container = $("#V14"); 
var cbs = container.children('input'); 
var entry; 
for (var i=0;i< cbs.length;++i){ 
    entry = $(cbs[Math.floor(Math.random() * cbs.length)]); 
    entry.add(entry.next()).appendTo(container); 
} 

...但是當我插入JQM事件中的一段代碼！

$(document).on('pagecontainerbeforeshow',function(e,ui){ 

現在不在線，：

var container = $("#V14"); 
    var cbs = container.children('input'); 
    var entry; 
    for (var i=0;i< cbs.length;++i){ 
     entry = $(cbs[Math.floor(Math.random() * cbs.length)]); 
     entry.add(entry.next()).appendTo(container); 
    } 
}) 

偶「pagecontainerbeforeshow」被完全觸發，我可以調試的代碼裏面.......當我檢查cbs.length它得到ZERO！...但是如果我在這個事件之外運行相同的代碼，cbs.length會得到3！...我的上帝，錯誤的地方在哪裏？

Answer 1

首先，頁面容器事件在BODY標籤上而不是文檔。 其次，在這一點上，jQM增強了fieldgroup，所以你需要對.ui-radio DIV進行排序，而不是基礎輸入。最後，破壞並重新提升controlgroup所以項目被重繪正確：

$("body").on("pagecontainerbeforeshow", function(e, ui){ 
    var container = $("#V14"); 
    var cbs = container.find('.ui-radio'); 

    var entry; 
    for (var i=0;i< cbs.length;++i){ 
     entry = $(cbs[Math.floor(Math.random() * cbs.length)]); 
     entry.add(entry.next()).appendTo(container); 
    } 
    container.controlgroup("destroy").controlgroup(); 
}); 

工作DEMO