jQuery Mobile 忽略表单元素上的数据角色 ="none"

Question

我正在将页面动态注入(inject)到我的 jQuery Mobile 应用程序中。除了表单元素之外，一切都工作正常。似乎在注入(inject)页面上的表单元素上 data-role="none"被忽略。

<p><input data-role='none' type='radio' name='type' id='type' value='none'/>None</p>
<p><input data-role='none' type='radio' name='type' id='type' value='segments'/>Market Segments</p>
<p>&nbsp; &nbsp; &nbsp <select data-role='none' id='segments'><option value='all'>All</option></select></p>

单选按钮呈现为常规单选按钮，尽管格式有些奇怪。选择按钮应显示为常规下拉列表，但它被呈现为 jQuery Mobile 下拉列表。

以下是页面的注入(inject)方式:

var t = results.rows.item(i).body;
var n = results.rows.item(i).name;
$("#"+n).remove();
$("body").append(t);
$("#"+n).appendTo($.mobile.pageContainer);
$("#"+n).attr('data-url',$("#"+n).attr("ID")).trigger('create');

非注入(inject)页面上的表单元素工作正常...有什么想法吗？

Answer 1

默认情况下，如果您想告诉 JQM ignore，jQuery Mobile 将自动增强表单元素。您可以将 data-role="none" 属性添加到容器，但您还需要设置 $.mobile.ignoreContentEnabled = true。原因是默认情况下 JQM 不会检查 data-role="none" 属性(以免每次都执行不必要的检查)。

请记住，您需要在 mobileinit 中设置 ignoreContentEnabled 事件。