Question

我设法在JQuery中设置我的复选框样式，因为我希望它们看起来：

var content = '<fieldset data-role="controlgroup" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical">' +
    '<div class="ui-controlgroup-controls">' +
    '<div class="ui-checkbox">' +
    '<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom">' +
    '<label for="checkbox-1a" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-btn-icon-left ui-corner-top ui-checkbox-on ui-btn-up-c">' +
    '<span class="ui-btn-inner ui-corner-top"><span class="ui-btn-text">Food</span><span class="ui-icon ui-icon-shadow ui-icon-checkbox-on">&nbsp;</span></span></label></div>' +
    '<div class="ui-checkbox">' +
    '<input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom">' +
    '<label for="checkbox-4a" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" data-theme="c" class="ui-btn ui-btn-up-c ui-btn-icon-left ui-checkbox-off ui-corner-bottom ui-controlgroup-last">' +
    '<span class="ui-btn-inner ui-corner-bottom ui-controlgroup-last"><span class="ui-btn-text">Sun Chips</span><span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">&nbsp;</span></span></label></div>' +
    '</div></fieldset>';

结果是静态的（单击按钮时没有动作或状态更改）。

如何让它们作为普通复选框，单击时更改其检查状态？

谢谢！

Answer 1

我想你将你的html字符串附加到id为myCheckBoxes

的div

例如：<div id="myCheckBoxes"></div>

尝试如下

$('#myCheckBoxes').html(content);
$('#myCheckBoxes').trigger("create");

Answer 2

jQuery Mobile不仅是样式元素，还添加了一些事件处理和类/属性切换（类似于JUI，但在标记中有JQM）。因此，您需要自己添加此行为或在JQM开始解析或插入标准元素之前插入标准元素，并使JQM再次解析它们。

要使JQM重新呈现移动页面标记，您需要调用以下内容：

$jqueryElement.trigger("create");

$jqueryElement例如：

$jqueryElement = $('#elementId');

编辑：换句话说，你不应该使用像ui-checkbox这样的类。您应该添加带有label和字段集的简单输入，如下所示：

<fieldset data-role="controlgroup" data-type="vertical">
    <input id="foo1" name="foo" type="checkbox"><label for="foo1">Option 1</label>`
    <input id="foo2" name="foo" type="checkbox"><label for="foo2">Option 2</label>`
</fieldset>

jquery mobile复选框样式问题

2 个答案: