jQuery Mobile不会在动态复选框上应用样式，也不能单击 [英] jQuery Mobile doesn't apply style on dynamic checkboxes and can't clicked

问题描述

我尝试刷新在菜单标签页点击时在fieldset标记中添加的复选框的数量。第一个标签访问是好的，但之后，所有复选框不能再被选中。我已经修改我的代码几次，但它不工作。有时他们可以检查，但没有风格应用。有时候，他们不能检查，但应用样式。

I'm trying to refresh the number of checkboxes that has been appended in fieldset tag when clicked at menu tab footer. The 1st tab visit is okay but after that, all checkboxes can't be checked anymore. I have been modified my code several times but it doesn't work. Sometimes they can be checked but without style applied. Sometimes they can't be checked but have style applied.

我尝试了 .controlgroup（'refresh'）; 和 .checkboxradio刷新）; 但没有一个是工作。我看看大多数类似的问题，但他们不帮助我解决这个问题。可能我把代码放在错误的地方？

I have tried .controlgroup('refresh'); and .checkboxradio("refresh"); but none of them are working. I have look at most of similar questions but they're not helping me solve this problem. May be I put the code in the wrong place?

对于 .checkboxradio（refresh）; 总是记录这个错误。
在初始化之前不能调用checkboxradio上的方法;尝试调用方法'refresh'

For .checkboxradio("refresh"); the console always log this error. cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'

这是我原来的HTML和JS

This is my original HTML and 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（）方法将会失败。

Since you are adding new elements, there will be no jQuery Mobile widgets to augment them, so trying to call their refresh() method will indeed fail.

告诉jQuery Mobile捕获新的标记的方法是触发容器元素上的 create 事件：

A simple way of telling jQuery Mobile to "catch up" with new markup is to trigger the create event on a container element:

$("#checkboxes_wrapper2").trigger("create");

这篇关于jQuery Mobile不会在动态复选框上应用样式，也不能单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！