jQuery script not working when page is loaded into div through AJAX

Question

I have a main index.php with several rows of a database displayed via json. each of these rows contains a button "view details" which performs an ajax call to display details.php within an empty div on index.php called "hidden". The AJAX is performed successfully but Details.php contains a jQuery slide show that works but not when loaded thought the ajax into the index.php.

my ajax call in index.php is as so:

function viewdets(int){

var v = new XMLHttpRequest() ;
        v.onreadystatechange = function() {
        if((this.readyState == 4) && (this.status == 200)){
            document.getElementById("hidden").innerHTML = this.responseText;
        }};
        v.open("GET", "filename" + int, true) ;
        v.send() ;  
        }

and the script in details.php:

<body>

<div id="slider">

        <img src="img">
        <img src="img">
        <img src="img">
        <img src="img">

    </div>

<script type="text/javascript">

$(document).ready(function() {
$('#slider').cycle({

    fx:         'scrollHorz',
    next:       '#next',
    prev:       '#prev',
    timeout:    0


});
});

</script>

</body>

The slideshow displays fine but the jQuery does not work. I realise that the script being brought in through AJAX is the issue but I am new to these technologies so I am not sure why. Any help would be very much appreciated.

This is the expected behaviour of innerHTML, you need to execute the scripts yourself by using ``eval`` or something like that. See http://stackoverflow.com/questions/2592092/executing-script-elements-inserted-with-innerhtml and other similar questions. — Dzmitry Kushnarou, Apr 01 '17 at 12:30

jQuery script not working when page is loaded into div through AJAX

0 Answers0