div sliding effect does not work with jQuery
<p>I created this question before but in another way and got no answers. So today I wrote some simple code to share my problem in a clear way. </p>

<ol>
<li>I used <code>jQuery</code> to call an image slideshow function.</li>
<li>The AJAX function in <code>show.php</code> will call <code>get.php</code> and print the results in a DIV.</li>
</ol>

<p>My problem is that sliding (prev - next) inside the DIV supplied by <code>get.php</code> does not work in <code>show.php</code>. But if I call <code>get.php</code> directly in my browser, then it works.</p>

<p>I am confused, I guess I have an error in my div when calling AJAX.</p>

<p><strong>My Files</strong></p>

<p><strong>show.php</strong></p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
        &lt;title&gt;test &lt;/title&gt;
        &lt;link rel="stylesheet" type="text/css" href="demo.css" /&gt;
        &lt;script type="text/javascript" src="jquery-1.4.2.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="newscript.js"&gt;&lt;/script&gt;
        &lt;link href="themes/2/js-image-slider.css" rel="stylesheet" type="text/css" /&gt;
        &lt;script src="themes/2/js-image-slider.js" type="text/javascript"&gt;&lt;/script&gt;
        &lt;link href="generic.css" rel="stylesheet" type="text/css" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;?php
            include("samiloxide.php");
            $sql=mysql_query(" select * from  section ");

            while($r=mysql_fetch_array($sql)){
                echo "&lt;li&gt;&lt;a  onclick='loadpage($r[id])' &gt;$r[section]&lt;/a&gt;&lt;/li&gt;" ;
            }
        ?&gt;
        &lt;div id="pageContent"&gt;&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>newscript.js</strong></p>

<pre><code>var section;
function loadpage(section){ 
    var section = section.toString();

    $.ajax({
       type: "POST",
       url: "get.php",
      dataType: "script",
       data: ({section : section}),
     success: function(html){
            $("#pageContent").empty();
            $("#pageContent").append(html);
        }
    });
}
</code></pre>

<p><strong>get.php</strong></p>

<pre><code>&lt;script type="text/javascript" src="jquery-1.4.2.min.js"&gt;&lt;/script&gt;
&lt;style type="text/css"&gt;
    &lt;!--
    #gallery-wrap{margin: 0 auto; overflow: hidden; width: 732px; position: relative;}
    #gallery{position: relative; left: 0; top: 0;}
    #gallery li{float: left; margin: 0 20px 15px 0;}
    #gallery li a img{border: 4px solid #40331b; height: 175px; width: 160px;}
    #gallery-controls{margin: 0 auto; width: 732px;}
    #gallery-prev{float: left;}
    #gallery-next{float: right;}
    --&gt;
&lt;/style&gt;

&lt;script type="text/javascript"&gt;
    &lt;!--
    $(document).ready(function(){ 
        // Gallery
        if(jQuery("#gallery").length){
            // Declare variables
            var totalImages = jQuery("#gallery &gt; li").length, 
            imageWidth = jQuery("#gallery &gt; li:first").outerWidth(true),
            totalWidth = imageWidth * totalImages,
            visibleImages = Math.round(jQuery("#gallery-wrap").width() / imageWidth),
            visibleWidth = visibleImages * imageWidth,
            stopPosition = (visibleWidth - totalWidth);

            jQuery("#gallery").width(totalWidth);

            jQuery("#gallery-prev").click(function(){
                if(jQuery("#gallery").position().left &lt; 0 &amp;&amp; !jQuery("#gallery").is(":animated")){
                    jQuery("#gallery").animate({left : "+=" + imageWidth + "px"});
                }
                return false;
            });

            jQuery("#gallery-next").click(function(){
                if(jQuery("#gallery").position().left &gt; stopPosition &amp;&amp; !jQuery("#gallery").is(":animated")){
                    jQuery("#gallery").animate({left : "-=" + imageWidth + "px"});
                }
                return false;
            });
        }
    });
    --&gt;
&lt;/script&gt;

           &lt;?php
            include("samiloxide.php");
//if(!$_POST['page']) die("0");

$section = (int)$_POST['section'];

$sql=mysql_query(" select * from images  where section='$section'");

echo "
&lt;div id='gallery-wrap'&gt;
    &lt;ul id='gallery'&gt;
    ";


while($rr=mysql_fetch_array($sql)){

      echo " &lt;li&gt;&lt;a href='$rr[image]'&gt;&lt;img src='$rr[image]' alt='' /&gt;&lt;/a&gt;&lt;/li&gt;";
           }
           echo "

    &lt;/ul&gt;
&lt;/div&gt;
&lt;div id='gallery-controls'&gt;
    &lt;a href='#' id='gallery-prev'&gt;&lt;img src='images/prev.png' alt='' /&gt;next&lt;/a&gt;
    &lt;a href='#' id='gallery-next'&gt;&lt;img src='images/next.png' alt='' /&gt;last&lt;/a&gt;
&lt;/div&gt;
           ";
?&gt;
</code></pre>
