2013-02-10 70 views
0

所以这是一个我在互联网上看到的问题,但我不能为我的生活弄清楚为什么它不起作用。jquery mobile - ajax在for循环中加载复选框不与.trigger()

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

因此,我正在返回一个json对象的服务器上运行一个查询,以填充我的复选框。在JS中,我使用ajax来获取这个json对象并遍历内容来填充复选框。在下面的例子中,'result'变量返回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 --> 

JS

$(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.'); 
    } 

}); 

}); 
+0

你能不能把上市jQuery和jQueryMobile的版本?你有没有尝试过使用.append(friendsListContent)而不是.html(...)? – Nukeface 2013-02-10 11:14:33

+0

嘿。 Jquery-mobile 1.2和jquery 1.8.2。我做了耶,不行。 – Andre 2013-02-10 11:40:29

回答

0

好了,答案是一个事实,即在类和名称的数字没有被通过与每个复选框项目的迭代。

在for循环我改成了这个......

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