Second ajax request doesn't work

Question

I made an ajax website calling pages from /pages folder inside an ajax-container div in my index.php .

Now i want to make a second ajax request after the first ajax request success but the second request will be only on certains page,

for example: i call the page work.php and inside this page i want to call a page work-slider from the same folder and replace the work.php page by work-slider.php in my ajax-container div when i click on images link-in but i can't find a solution for make it,

This is my actual code:

index.php:

 <div id="ajax-container"> <?php $d = "pages/"; if (isset($_GET['p'])) { $p = strtolower($_GET['p']); if (preg_match("/^[a-z0-9\\-]+$/", $p) && file_exists($d . $p . ".php")) { include $d . $p . ".php"; } else { include $d . "404.php"; } } else { include $d . "home.php"; } ?> </div> 

Ajax function:

 var afficher = function(data) { $('#ajax-container').fadeOut(250, function() { $('#ajax-container').empty(); $('#ajax-container').append(data); $('#ajax-container').fadeIn(100, function() {}); }); }; var lastRequest = null; if (lastRequest !== null) { lastRequest.abort(); } var loadPage = function(page, storeHistory) { if (typeof storeHistory === 'undefined') { storeHistory = true; } lastRequest = $.ajax({ url: "pages/" + page, cache: false, success: f$.ajax({ url: "pages/" + page, cache: false, success: function(resultFirst) { afficher(resultFirst); if (storeHistory === true) { history.pushState({ 'key': 'value', 'url': page }, '', page); } $.ajax({ // How can i define pageIn variable ?? url: "pages/" + pageIn, cache: false, success: function(resultSecond) { afficher(resultSecond); } }); }, error: function(XMLHttpRequest, textStatus, errorThrown) { afficher('erreur lors du chagement de la page'); } }); return false; }; window.addEventListener('load', function() { setTimeout(function() { window.addEventListener('popstate', function(e) { if (e.state === null) { loadPage('home.php'); } else { loadPage(e['state']['url'], false); } }); }, 0); }); // link inside index.php $('.link').bind('click', function(e) { e.preventDefault(); var page = $(this).attr('href'); loadPage(page); return false; }); // second link inside called page $('.link-in').bind('click', function(e) { e.preventDefault(); var pageIn = $(this).attr('href'); loadPage(pageIn); return false; }); 

Answer 1

If that .link-in tag if dinamically inserted into the DOM after the page loads, the bind() method will fail: bind() attach listeners to elements it find when called. If you add a new elemenent after the bind call, it will not receive the listener binding.

In order to prevent that when dinamically inserting html code in a page, you should use the on() method:

  $('body').on('click' , '.link-in', function(e) {
     e.preventDefault();
     var pageIn = $(this).attr('href');
     loadPage(pageIn);
     return false;
  });

And now, every .link-in tag you push dinamically inside body will respond to the click listener. A discussion on using on() by default instead of bind() is in fact found in the bind() documentation .