jquery mobile - for循环中的ajax加载复选框不适用于.trigger（）答案

【问题标题】：jquery mobile - ajax loading checkboxes in for loop not working with .trigger()jquery mobile - for循环中的ajax加载复选框不适用于.trigger（）
【发布时间】：2013-02-10 23:44:38
【问题描述】：

所以这是我在整个互联网上看到的一个问题，但我一生都无法弄清楚为什么它不起作用。

对于那些会知道我正在尝试什么的人 - 我已经使用 .html(contentVariable) 加载了静态输入内容，它工作正常，但是一旦我将复选框创建放入 for 循环中，一切都会进入锅底并且只有第一个复选框元素似乎在工作并且应用了样式。

所以我正在服务器上运行一个查询，该查询返回一个 json 对象以填充我的复选框。在 JS 中，我使用 ajax 来获取这个 json 对象并遍历内容以填充复选框。下面示例中的“结果”变量返回了 3 个结果，而这方面工作正常（如果人们意识到我实际上并没有从返回的对象中回显结果）。

所以我的猜测是我没有在正确的位置或根本没有正确使用 .trigger()。任何帮助将不胜感激。

非常感谢。

HTML

        <!-- register page -->
    <div data-role="page" id="two">
        <script type="text/javascript" src="js/friendsList.js"></script>
        <div data-role="header">
            <h1>New Project</h1>
            <a href="#two" class="ui-btn-left"  data-rel="back" data-icon="back" data-transition="flip">Back</a>
        </div>
        <div data-role="content">
            <form id='registerUser' action="" method="POST">
                <div data-role="fieldcontain" class="checkWrap">

                </div>
                <button type="button" aria-disabled="false">Submit</button>
            </form>
        </div>
    </div><!-- /page two -->

$(document).delegate('#two', 'pageshow', function() {

var userId = localStorage.getItem('userId');
var friendsListContent = "";

$.ajax({
    url: 'http://www.mysite.co.uk/app/friends/listFriends.php',
    type: 'post',
    data: {'userId': userId},
    dataType: 'json',
    crossDomain : true,
    timeout: 5000,

    success: function(result){
    friendsListContent = "<fieldset data-role='controlgroup'><legend>Choose as many snacks as you'd like:</legend>";

        for(var i = 0; i < result.length; i++){
            friendsListContent += "<input type='checkbox' name='checkbox-1a' id='checkbox-1a' class='custom' /><label for='checkbox-1a'>Cheetos</label>";           
        }

    friendsListContent += "</fieldset>";

    $('.checkWrap').html(friendsListContent);
    $('.checkWrap').trigger('create');
    $("input[type='checkbox']").checkboxradio("create");
    },

    error: function(){
        alert('There was an error loading the data. Contact the admin.');
    }

});

});

【问题讨论】：

您介意列出 jQuery 和 jQueryMobile 的版本吗？您是否尝试过使用 .append(friendsListContent) 而不是 .html(...)？
嘿。 jquery-mobile 1.2 和 jquery 1.8.2。我做了，是的，不起作用。

标签： jquery ajax jquery-mobile checkbox

【解决方案1】：

好的，答案是类和名称中的数字并没有被每个复选框项目迭代。

在for循环中我把它改成了这个...

friendsListContent += "<input type='checkbox' name='checkbox-" + i + "a' id='checkbox-" + i + "a' class='custom' /><label for='checkbox-" + i + "a'>Cheetos</label>";

【讨论】：