4

我创建了一个包含复选框的列表视图。在几个列表项上，我希望选中复选框。当内容来自服务器时，列表视图是动态创建的。

我有以下 jsfiddle 代码。http://jsfiddle.net/praleedsuvarna/rN28z/

你能帮我解决这个问题吗？提前致谢

下面是我的动态列表内容的示例，其中第二个和第三个复选框设置为“已选中”

$(document).on('pageshow', '#index', function(){     
    var list = '<li>'+
    '   <div class="checkBoxLeft">'+
    '       <input type="checkbox" name="checkbox-0" id="checkbox-0" class="hidden-checkbox"/>'+
    '   </div>  '+
    '   <a href="item1.html" class="detailListText">item1</a>'+
    '</li>'+
    '<li>'+
    '   <div class="checkBoxLeft">'+
    '       <input type="checkbox" name="checkbox-0" id="checkbox-0" class="hidden-checkbox" checked="checked"/>'+
    '   </div>'+
    '   <a href="item1.html" class="detailListText">item2</a>'+
    '</li>'+
    '<li>'+
    '   <div class="checkBoxLeft">'+
    '       <input type="checkbox" name="checkbox-0" id="checkbox-0" class="hidden-checkbox" checked="checked"/>'+
    '   </div>                     '+
    '   <a href="item1.html" class="detailListText">item3</a>'+
    '</li>'

    $("#viewdata").html(list);
    $("#viewdata").listview("refresh");
});

下面是我的html页面

<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">
            <ul data-role="listview" data-theme="a" id="viewdata">
            </ul>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>   
</body>
4

1 回答 1

3

固定和稍微清理的版本：http: //jsfiddle.net/rN28z/6/

我移动了这段代码：

$('input[type="checkbox"]').each(function() {
    $(this).parent('.checkBoxLeft').addClass(this.checked ? 'checked' : 'not-checked');
});

内部pageshow处理程序。您正在调用它，pagebeforeshow到那时您的 HTML 尚未填充。

于 2013-03-16T08:03:40.617 回答