jQuery在AJAX加载的div中不起作用

Question

This is my slider.php page in which content of ajax.php file is loaded through ajax.

var xmlhttp;
function showtemplate(temp)
{
    if (window.XMLHttpRequest)
    { 
    xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState===4 && xmlhttp.status===200) {
                var div = document.getElementById('contain');
                div.innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open('GET', 'ajax.php?section='+temp, true);
        xmlhttp.send();
}

The content of ajax.php file is loading into the contain div .

This is my ajax.php file where I am using jquery to slideshow images.

<?php
    $final=$_REQUEST['section'];
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2"></script>
<script type="text/javascript">
$(function()
{
    var currentIndex = 0,
    var items = $('.container div'),
    var itemAmt = items.length;

    function cycleItems() 
    {
        var item = $('.container div').eq(currentIndex);
        items.hide();
        item.css('display','inline-block');
    }

    var autoSlide = setInterval(function() 
    {
        currentIndex += 1;
        if (currentIndex > itemAmt - 1) 
        {
            currentIndex = 0;
        }   
    cycleItems();
    }, 3000);

    $('.next').click(function() {
        clearInterval(autoSlide);
        currentIndex += 1;
        if (currentIndex > itemAmt - 1) 
        {
            currentIndex = 0;
        }
        cycleItems();
    });

    $('.prev').click(function() {
        clearInterval(autoSlide);
        currentIndex -= 1;
        if (currentIndex < 0) {
            currentIndex = itemAmt - 1;
        }
        cycleItems();
    });
});  
</script>
<section class="demo">
    <button class="next" id="next">Next</button>
    <button class="prev" id="prev">Previous</button>
    <div class="container"> 
        <div style="display: inline-block;">
            <img src='images/<?php echo $final;?>/image1.jpg'/> 
        </div>
    <div>
        <img src='images/<?php echo $final;?>/image2.jpg'/> 
    </div>
    <div>
        <img src='images/<?php echo $final;?>/image3.jpg'/> 
    </div>
    <!--<span u="arrowleft" class="jssora12l" style="width: 41px; height: 50px; top: 110px; left: 2px;"> </span>
    <span u="arrowright" class="jssora12r" style="width: 41px; height: 50px; top: 110px; right: 5px"> </span>-->  
</div>

but when I clicked on next and previous button it doesn't work. Please help me out.

Answer 1

My code is working now. I simply request section and display it as thumbs without using jquery.

<?php

$final=$_REQUEST['section'];

include "slider/relatedcat.php";
?>

<div style="margin-bottom: 10px; font-size: 18px;font-family: 'Roboto Slab',serif;margin-top: -7px">Choose <?php echo ucwords($final);?> Card Template.</div>

<?php 
    for($i=1;$i<=count($template);$i++)
    {           
    ?>
    <div id="thumb<?php echo $i;?>" onclick='showimage("template<?php echo $i; ?>","<?php echo $final;?>");' style='box-shadow: rgba(34, 25, 25, 0.4) 0px 1px 3px;border-radius: 15px;width: 150px !important;height: 150px !important;top: 0px;float:left;margin-right: 20px;margin-bottom:15px;overflow: hidden;transform: perspective(2000px);background: white;cursor: pointer;'>
    <img alt='<?php echo ucwords($final);?>' u='image' src='images/<?php echo $final;?>/template<?php echo $i?>.jpg' style='width:100%;height:100%;' /> 
    </div>
    <?php 
    }       
?>

If you want to use jquery in ajax loaded div then you have to redefine jquery function on success of ajax function like below code :

xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState===4 && xmlhttp.status===200) {
                var div = document.getElementById('contain2');
                div.innerHTML = xmlhttp.responseText;

                $('#resize').draggable({containment: '#main'}).resizable({maxWidth:350, maxHeight:333});
                $('#msgvisible').draggable({containment: '#main'});
                //alert(xmlhttp.responseText);
                document.getElementById('stylepart').style.display="block";


            }
        }