在运行时渲染 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");

我在html页面中有一个div的地方是这样的。

  <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>。