Jquery mobile在加载文件后添加面板以填充div

Question

OK so I am using $_POST to submit a form in jquery mobile and it works like this:

if($_POST['i']){?>
    <div id="info"></div>
    <script>
        $( "#info" ).load( "file.php?&information=<?=$_POST['i']?>");
    </script>
<?}?>   

file.php has something like this:

<a href="#panel1" role="button">info 1</a>
<a href="#panel2" role="button">info 2</a>

<div data-role="panel" id="panel1" data-display="overlay" data-position-fixed="true" class="panels">
    Text 1
</div>

<div data-role="panel" id="panel2" data-display="overlay" data-position-fixed="true" class="panels">
    Text 2
</div>

I want to load file.php to fill #info. Then I want to keep the links in that div and move the panels to after the footer of the containing page (#footer). My problem is that when I try to add something after the load like this:

<script>
    $( "#info" ).load( "file.php?i=<?=$_POST['i']?>");
    $("#footer").after(".panels");
</script>

Nothing appends. I can append other things after the footer like:

$("#footer").after("TEST"); 

So I guess the problem is that anything inside the loaded div is unavailable. How do I get at it?

Answer 1

You could try this

<script>
$( "#info" ).load( "file.php?i=<?=$_POST['i']?>", function() {
var p = $("#info").find( ".panels" ).detach();
$( "#footer" ).after(p);
});
</script>