Question

当点击按钮将ajax导入的信息放入ajaxarea1 div时，我的phonegap应用程序会进行简单的.load调用。但是，它没有被设计为jquery mobile从ajax加载后创建的可折叠类型对象。这里简化了js：

$('#ajaxarea1').load('http://server.net/droiddev/backbone1/index.php/welcome/', function(){
    $('#ajaxarea1').css("height","auto");
});

这是当.load转到url

时返回的php

<?php 
    foreach ($query as $row)
    {
         echo '<div data-role="collapsible">';
         echo '<h3>'.$row->headline.'</h3>';
         echo '<p>'.$row->article.'</p>';
         echo '</div>';
    }
?>

我在这里发现的一些类似问题对我没什么帮助。这里有一些js我发现我可能是问题的一部分

$('#ajaxarea1').collapsible().page();

由于

完整HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
     <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.js"></script>
     <script type="text/javascript" charset="utf-8" src="main.js"></script>
     <style type="text/css">  #ajaxarea1{width:308px;
  display:block;
  margin:2px auto;
  height:50px;
  overflow:hidden;} 
  #errorarea ul li{ color:red;}
  .center{text-align:center;}

  </style>
</head> 

<body onload="init()" style=""> 

<!-- Start of first page -->
<div data-role="page" id="firstpage" data-title="Page firstpage" data-theme="d" >

<!--    <div data-role="header" data-theme="d" data-position="fixed">


    </div> -->
    <a href="#" data-role="button" style="margin-top:15px;float:right;" data-iconpos="notext" data-icon="home">Home</a> 

    <div data-role="content">   
        <p>I'm first in the source order so I'm shown as the page.</p>  

        <p>View internal page called <a href="#secondpage" data-role="button" data-theme="d" data-transition="slide">2nd page</a></p>   
     <a href="#addart" data-role="button" data-theme="d" >Add Article</a>

    <div id="ajaxarea1"></div>
    <button type="button" id="calcbtn" onclick="change_ajaxarea1()">Ajax call</button>

    </div><!-- /content -->

    </div>
</div><!-- /page -->


<!-- Start of second page -->
<div data-role="page" id="thanks" data-theme="d">

<p> Your article has been received!!</p>
</div>



<div data-role="page" id="secondpage"  data-theme="d" data-title="Page secondpage ya firstpagel!">

    <div data-role="header" data-theme="d">
        <h1>    <a href="#" data-role="button" style="float:left;" data-rel="back" data-icon="arrow-l" data-theme="d" data-iconpos="notext">Back</a> </h1>

    </div><!-- /header -->

    <div data-role="content">   
        <p>This is the second page of content.</p>      
             <div data-role="collapsible"><!-- this works because its not loaded  by ajax -->
  <h3>Result from Ray</h3>
   <p id="resultBlock"></p>
   </div>


    </div><!-- /content -->

    <!--<div data-role="firstpageter" data-position="fixed">
<p style="width:100%;margin:0 auto;display:block;padding:5px;">The firstpageter is over here and i hope this doesnt get cut off. </p>
    </div> -->

    <!-- /firstpageter -->
</div><!-- /page -->


<!-- Start of third(add) page -->
<div data-role="page" id="addart" data-theme="d" data-title="Page secondpage ya firstpagel!">

    <div data-role="header" data-theme="d">
        <h1>Add article</h1>
        <a href="#" data-role="button" style="float:left;" data-rel="back" data-icon="arrow-l" data-theme="d" data-iconpos="notext">Back</a>
    </div><!-- /header -->

    <div data-role="content">   
        <form id="addform" style="text-align:center;"> <div id="errorarea"><ul>
            </ul></div><label for="Headline">Headline</label><br/><input type="text" name="Headline" title="Enter a title for the Headline at least 5 chars" class="required" id="headline" style="margin: 10px auto 20px auto;" placeholder="enter article headline.."></input>
<br/>   
 <label for="Article">Article</label><br/><textarea cols="40" rows="8" name="Article" id="article" class="required" title="Enter a article" name="textarea" style="margin: 10px auto 20px auto;" placeholder="enter article content.." id="textarea"></textarea>
        <br/>
        <input data-inline="true" style="display:inline-block;clear:both;text-align:center;" type="submit" value="Add Article"  onclick="addarticle()"></input>

        </form>



    </div>



    <!-- /content -->

    <!--<div data-role="firstpageter" data-position="fixed">
<p style="width:100%;margin:0 auto;display:block;padding:5px;">The firstpageter is over here and i hope this doesnt get cut off. </p>
    </div> -->

    <!-- /firstpageter -->
</div><!-- /page -->

</body>
</html>

完整的Javascript：

function change_ajaxarea1(){


$('#ajaxarea1').load('http://server.net/droiddev/backbone1/index.php/welcome/', function(){
   $('#ajaxarea1').css("height","auto").collapsible();
});



}




function postarticle(){

 $.post("http://server.net/droiddev/backbone1/", { headline: "John", article: "2pm" } );

 }


function addarticle(){
   //$("#addform").validate();

  var truth=$("#addform").validate().form()
 // alert(truth);
if(truth==true){
var headlinetemp=$('#headline').val();
var articletemp=$('#article').val();
navigator.notification.activityStart();
$.ajax({
type:'POST',
url: "http://server.net/droiddev/backbone1/index.php/welcome/addarticle/",
data: { 'headline': headlinetemp, 'article': articletemp},
success:function(){
$('#headline').val('');
$('#article').val('');
 $.mobile.changePage($('#thanks'), { transition: "slide"});
 navigator.notification.activityStop();
},
error:function(xhr){
navigator.notification.activityStop();
alert('Error: Article was not added.');
}



});

}
else{alert('Please Correct the Form');}

}


function init(){
var container = $('#errorarea');
$('#addform').validate({

    errorContainer: container,
        errorLabelContainer: $("ul", container),
        wrapper: 'li',
        meta: "validate"





});

}

function addarticletransition(){

var headlinetemp=$('#headline').val();
var articletemp=$('#article').val();
$.mobile.changePage( "http://server.net/droiddev/backbone1/index.php/welcome/addarticle/", {
    type: "post", 
    data: { 'headline': headlinetemp, 'article': articletemp}
});



}

更新++

Answer 1

在加载动态内容后尝试调用collapsible()和page()方法：

$('#ajaxarea1').load('http://server.net/droiddev/backbone1/index.php/welcome/', function(){ $('#ajaxarea1').css("height","auto").collapsible().page(); });

jjery mobile在ajax加载后不应用样式

1 个答案: