jQuery is not working in AJAX loaded div - php

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";
}
}