2013-02-10 68 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>";