在運行時渲染DOM在Dojox中不起作用

Question

我在這裏做的是，我正在以編程方式在div（id =「euiview」）中渲染DOM（具有複選框）。我的代碼就像

var iHtml='<span><input type="checkbox" id="cbox" data-dojo-type="dojox.mobile.CheckBox" onclick="toggleCheckbox()" class="addremove-check"><label for="cbox"> E&amp;U Imperatives </label> </span></p><p><span><input type="checkbox" id="cbox1" data-dojo-type="dojox.mobile.CheckBox" class="addremove-check"><label for="cbox1"> Transform the utility network </label></span></p>'; 

domConstruct.place(iHtml,"euiview"); 

其中我有一個div在html頁面就像。

<div id="euiview" data-dojo-type="dojox.mobile.View"> 

    </div> 

現在的問題是我無法選中或取消選中該複選框在一些Android設備瀏覽器，但它是在桌面瀏覽器工作正常。我可以這樣呈現html，或者我需要編程創建DOM？請幫幫我。謝謝

Answer 1

這取決於你何時解析你的頁面。如果你在之後解析你的頁面，你添加了新的HTML，那就沒有問題了。但是，如果您在之前解析頁面，並添加新的HTML，則Dojo不會將該DOM解析爲窗口小部件，因此您的複選框將不起作用。

我假設你正在解析DOM負載的頁面，所以它確實取決於首先執行什麼。可能有效的解決方案如下：

var iHtml='<div id="new-content"><p><span><input type="checkbox" id="cbox" data-dojo-type="dojox.mobile.CheckBox" onclick="toggleCheckbox()" class="addremove-check"><label for="cbox"> E&amp;U Imperatives </label> </span></p><p><span><input type="checkbox" id="cbox1" data-dojo-type="dojox.mobile.CheckBox" class="addremove-check"><label for="cbox1"> Transform the utility network </label></span></p></div>'; 

domConstruct.place(iHtml,"euiview"); 
parser.parse("new-content"); 

有了這個，您可以確保解析新內容。我還注意到，您正在關閉</p>標籤，但您並未在其前面放置<p>。