PHP/AJAX not rendering javascript

Question

I am working with some complex PHP intended for mobile , and it is using AJAX (as indicated by data-ajax="true" in <div>) to include other PHP files into the page and at the same time hiding the existing data using jQuery. While the header and address are changing, the actual web page is simply being updated. When updating for the first new "page" no javascript is added. The core page includes a PHP file involving output buffering, but I didn't think that would cause a scripting error. I'm using PHP 5.4.9, not sure if that will make a difference or not.

The core page (page1):

<?php
if (!isset($_SESSION)) session_start();

include_once("$path/lib/functions/show_header.php");

//PHP page including output buffer
show_header($html_back='normal', $html_home='public_page', $header_title='Directory', $bool_back=TRUE, $title=$header_title, $javascript=&$myScript, $cache=FALSE, $viewport=TRUE);
?>

<ul id="list" data-inset="true" data-role="listview" ><!--data-filter="true" data-filter-placeholder="Search for Feeds..."-->
<li id="header" data-role="list-divider">Select a Search Option</li>

<li>
    <a href="page2.php?header=Option1" data-ajax="true">Option 1</a>
</li>
<li>
    <a href="page2.php?header=Option2" data-ajax="true">Option 2</a>
</li>
<li>
    <a href="page2.php?header=Option3" data-ajax="true">Option 3</a>
</li>

</ul>
</div><!-- // Content-->
</div><!-- // Page-->
</body
</html>

The code getting inserted:

<script>alert("The JS is working!");</script>

<div data-role="page" data-theme="c">
    <div data-role="header" data-theme="b">
        <a href="#" data-rel="back" data-ajax="true" data-icon="arrow-l" data-direction="reverse">Back</a>
        <h1><?php echo $_GET['header']?></h1>
    </div>
    <div data-role="content" role="main">

        <textarea id=search name="search" cols="1" rows="1" onblur="return validate()" onfocus="this.innerHTML=''">Search For...</textarea>

        <ul id="list" data-inset="true" data-role="listview" >
            <li id="header" data-role="list-divider"></li>

            <li>
                <a id=button href="" data-ajax="true">Search</a>
            </li>

        </ul>
    </div><!-- // Content-->
</div><!-- // Page-->

Any assistance would be appreciated. I'm experienced with PHP, but a novice when it comes to AJAX and jQuery.

Answer 1

The jQuery was grabbing only the PHP included in the outermost <div>. Somehow this never made it into the documentation. Documentation is king!

Once moving the javascript and php inside that <div> I could do anything I wanted. At that point I got rid of inline javascript and switched to javascript event handlers instead. I never was able to track down the exact jquery usage that caused it to ignore my php and javascript outside the <div>.