Not able to execute javascript inside page that's loaded via jQuery's ajax -

summary...

i have page loading other pages ajax , contain javascript. javascript makes use of document.ready doesn't work right when using code this...

    $.ajax({          type: 'get',         url: 'layouts/' + layout + '.php',         success: function(data){               $('.swap').fadeout('slow', function(){ // container                  $(this).delay(100).fadein().html(data);              });          }      });  

it doesn't work right in sense javascript running fast.

what's best way load pages make use of document.ready or code it?

when use ajax load page, javascript in page typically not executed. can use jquerys load() method load page in , execute scripts.

in template page, add <div> hold actual contents of page so:

<div id="container">   <ul>     <li></li>   </ul> </div> 

in "control panel" page, have container <div> well:

<div id="container"></div> <script src="bxslider.js"></script> 

you call code in manner

$(function(){    var layout = 'layoutpage1';    // loads contents of #container div in layout page   // #container div on cp page.   $('#container').load( '/layouts/' + layout + '.php #container', function() {     initslider();  // initialize slider loaded   });    function initslider() {     $('.bxslider').bxslider({             pager: false,             controls: false,             auto: true,             mode: 'fade',             speed: 1500     });   }    // if there slider on page can initialize here   // remove comment   // initslider(); });