加載新頁面時附加不工作

我試圖加載數據到div使用JavaScript頁面加載時。我正在使用jQuery Mobile。該頁面使用正常的href進行調用，我認爲它被通過jQM劫持。加載新頁面時附加不工作

但我的JavaScript似乎有點奇怪，所有的腳本運行（我檢查使用alert s），但append函數似乎沒有任何影響的頁面。我試過了各種各樣的功能：pagecreate,pagebeforeshow,document.ready。

這裏是我的代碼相關部分：

<body> 
<div data-role="page" id="page"> 
    <div data-role="content" style="padding:0" data-theme="k">  
     <ul class="rig columns-3" style="margin:0;padding-left:0;padding-right:8px;padding-top:20vw" id="DrinkGridView">   
      <!-- <li> 
       <img src="images/logo.png" /> 
       <h3>Image Title</h3> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> 
      </li> --> 
     </ul> 
    </div><!-- /content -->   
    <script type="text/javascript"> 
     //$(document).delegate("#page", "pageinit", function() { 
     var global_id; 
     var global_data; 
     var fields = []; 

     $.ajax({      
      type: "POST", 
      url: "http://192.168.1.120/yiibootstrap_old/index.php/userregistration/makedrink", 
      cache: false, 
      success: function(data) 
      { 
       var obj = $.parseJSON(data); 
       $.each(obj, function() 
       {       
        fields.push({id:this['id'],name:this['name'],image:this['image'],Description:this['description']});    
       }); 
      var count = fields.length;     
      count1 = parseInt(count); 
      for (var r = 0; r < count1; r++) 
      { 
       $('#DrinkGridView').append('<a id="inline" href=#data><li id="' + fields[r]['id'] + '"> <img src="http://192.168.1.120/yiibootstrap_old/uploads/' + fields[r]['image'] + '"/> <h3><b>' + fields[r]['name'] + '</h3> <p id="sss">' + fields[r]['Description'] + '</p> </li></a>').children().last().trigger("create"); 
       // THIS APPEND IS NOT SHOWING RESULT !! 
      } 
     }); 
     //});  
    </script> 
</div><!-- /page --> 
</body>

來源

2015-01-03 ShahiM

在您的代碼中ajax沒有正確關閉 –

它已關閉，我只是錯過了它，當我刪除了一些發佈代碼。代碼運行沒有錯誤，但apppend方法似乎沒有任何影響。 – ShahiM

追加工作沒有'.children（）。last（）。trigger（「create」）'？把'a'放在'li'裏面，不要放在裏面。 – Mouser

您需要將代碼包裝在pagecreate事件中委託給頁面div，ID爲page。在創建頁面時，將該頁面中的列表視圖定位到$('#DrinkGridView', page)。然後在追加元素.listview("refresh")後，您需要撥打刷新方法。

.children().last().trigger("create");是不是正確的方法增強 listview。

$(document).on("pagecreate", "#page", function() { 
    var $listview = $('#DrinkGridView', this), /* target listview */ 
     global_id, 
     global_data, 
     fields = []; 

    $.ajax({ 
     type: "POST", 
     url: "http://192.168.1.120/yiibootstrap_old/index.php/userregistration/makedrink", 
     cache: false, 
     success: function (data) { 
      var obj = $.parseJSON(data); 
      $.each(obj, function() { 
       fields.push({ 
        id: this.id, 
        name: this.name, 
        image: this.image, 
        Description: this.description 
       }); 
      }); 
      var count = fields.length; 
      count1 = parseInt(count, 10); 
      for (var r = 0; r < count1; r++) { 
       /* add elements to $listview defined previously */ 
       $listview.append('<a id="inline" href=#data><li id="' + fields[r].id + '"> <img src="http://192.168.1.120/yiibootstrap_old/uploads/' + fields[r].image + '"/> <h3><b>' + fields[r].name + '</h3> <p id="sss">' + fields[r].Description + '</p> </li></a>'); 
      } 
      /* refresh after for loops is done */ 
      $listview.listview("refresh"); /* refresh */ 
     } 
    }); 
});

來源

2015-01-03 12:56:13 Omar

OP是否需要在ul – Tasos

@Tasos中添加（data-role =「listview」）true，我錯過了這一點。 – Omar

@omar。我可以把JavaScript放在任何特定的div或任何地方工作？ – ShahiM

此代碼應正常工作。

$('page').on('pageinit', function() { 
    var global_id; 
    var global_data; 
    var fields = []; 

    $.ajax({      
     type: "POST", 
     url: "http://192.168.1.120/yiibootstrap_old/index.php/userregistration/makedrink", 
     cache: false, 
     success: function(data) 
     { 
       var obj = $.parseJSON(data); 
       $.each(obj, function() 
       {       
        fields.push({id:this['id'],name:this['name'],image:this['image'],Description:this['description']});    
       }); 
      var count = parseInt(fields.length);     

      for (var r = 0; r < count; r++) 
      { 
       $('#DrinkGridView').append('<li id="' + fields[r]['id'] + '"><a id="inline" href=#data><img src="http://192.168.1.120/yiibootstrap_old/uploads/' + fields[r]['image'] + '"/> <h3><b>' + fields[r]['name'] + '</h3> <p id="sss">' + fields[r]['Description'] + '</p></a></li>').children().last().trigger("create"); 
       // Switched the a and the li, but that didn't prevent the code from working. 
      } 
     } 
    }); 
});

在發佈代碼有一個}缺少應該關閉ajax的成功事件。但我認爲這只是一個複製粘貼錯誤。

來源

2015-01-03 12:53:49 Mouser

「從另一個頁面導航」但是我的JavaScript看起來有點奇怪，所有的腳本運行（我使用警報檢查過），但是附加函數似乎沒有任何影響page._「，更不要說'.ready（）'應該用在jQM中。 – Omar

...不應該... – Omar

加載新頁面時附加不工作

回答

相關問題