jQuery Mobile 不在动态复选框上应用样式并且无法单击

2024-03-20

我试图刷新在菜单选项卡页脚单击时附加在字段集标记中的复选框数量。第一次选项卡访问没问题,但此后,所有复选框都无法再选中。我已经多次修改我的代码,但它不起作用。有时可以检查它们但不应用样式。有时无法检查它们,但应用了样式。

我努力了.controlgroup('refresh'); and .checkboxradio("refresh");但他们都没有工作。我看过大多数类似的问题,但它们并没有帮助我解决这个问题。可能是我把代码放错地方了?

For .checkboxradio("refresh");控制台总是记录此错误。 在初始化之前无法调用 checkboxradio 上的方法;尝试调用方法'refresh'

这是我原来的HTML和JS

<div data-role="content" data-theme="a">
     <div id='delete_wrapper'>
          <a href="#" data-role="button" id='deleteButton'>Delete</a>
          <a href="#" data-role="button" id='deleteAllButton'>Delete All</a>
     </div>
     <fieldset data-role="controlgroup" id='checkboxes_wrapper2'>

     </fieldset>
 </div>

这是我的 JS

runfirstDelete = true;
$('.delete_tab').click(function(){
$("#checkboxes_wrapper2").children().remove();
    var dataIndex;
    var dataName;
    for(var i in localStorage)
    {   
        dataIndex = JSON.parse(localStorage[i]).index;
        dataName = JSON.parse(localStorage[i]).name;

        if(runfirstDelete){ // This for 1st time visit, It's working okay.
            $("#checkboxes_wrapper2").append('<input type="checkbox" name="'+dataIndex+'" id="checkbox'+dataIndex+'" value="'+dataIndex+'"/><label for="checkbox'+dataIndex+'">'+dataName+'</label>');
        }
        else{ //if not, trying to insert embedded style in element
            $('#checkboxes_wrapper2').append('<div class="ui-checkbox"><input type="checkbox" value="'+dataIndex+'" name="'+dataIndex+'" id="checkbox'+dataIndex+'"><label for="checkbox'+dataIndex+'" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" data-theme="a" data-mini="false" class="ui-checkbox-off ui-btn ui-btn-up-a ui-btn-corner-all ui-fullsize ui-btn-icon-left ui-btn-up-a"><span class="ui-btn-inner"><span class="ui-btn-text">'+dataName+'</span><span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">&nbsp;</span></span></label></div>');
        }
    }
    runfirstDelete = false; //Then indicate that it's not 1st click on tab
});

由于您要添加新元素,因此不会有 jQuery Mobile 小部件来增强它们,因此尝试调用它们refresh()方法确实会失败。

告诉 jQuery Mobile “赶上”新标记的一个简单方法是触发create容器元素上的事件:

$("#checkboxes_wrapper2").trigger("create");
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery Mobile 不在动态复选框上应用样式并且无法单击 的相关文章