Jquery ajax call on click, works only once

Question

I have this simple jquery code. When clicked, it gets the tag URL, loads this page next to the current content, slide and deletes the old content. The page state is EXACTLY the same as before, and also does not contain unnecessary classes or styles. The problem is that the next ajax call just doesn't work. Maybe I need .unbind () something?

I am new to jquery and javascript, so I am completely lost. Many thanks for your help:)

<script type="text/javascript"> $(document).ready(function(){ loadPage(); }); function loadPage(url) { if (url == undefined) { $('body').load('index.html header:first,#content,footer', hijackLinks); } else { $.get(url , function(data) { $('body').append(data); $('body>meta').remove(); $('body>link').remove(); $('body>title').remove(); $('body').append(direction); sm = $(window).width(); if(direction == "leftnav"){ $('body>header:last,body>#content:last,footer:last').css("left", "-" + sm + "px"); footerheight = $('body>#content:last').outerHeight(false) + $('body>header:last').outerHeight(true) ; $('footer:last').css("top", footerheight); $('body>header,body>#content,footer').css("-webkit-transition-duration","0.5s") $('body>header,body>#content,footer').css("-webkit-transform","translate(" + sm + "px,0px)"); }; if(direction != "leftnav"){ $('body>header:last,body>#content:last,footer:last').css("left", sm + "px"); footerheight = $('body>#content:last').outerHeight(false) + $('body>header:last').outerHeight(true) ; $('footer:last').css("top", footerheight); $('body>header,body>#content,footer').css("-webkit-transition-duration","0.5s") $('body>header,body>#content,footer').css("-webkit-transform","translate(-" + sm + "px,0px)"); }; setTimeout(function(){ $('body>header:not(:last),body>footer:not(:last),body>#content:not(:last)').remove() },500); setTimeout(function() { $('body>header,body>footer,body>#content').removeAttr('style') },500); }); } } function hijackLinks() { $('a').click(function(e){ e.preventDefault(); loadPage(e.target.href); direction = $(this).attr('class'); }); } </script> 

Answer 1

Since you are dynamically loading content that replaces the contents of your body , your event handler will most likely not remain.

To fix this, you need to configure the click handler to use live() or delegate()

 $('a').live("click", function(e){ e.preventDefault(); loadPage(e.target.href); direction = $(this).attr('class'); }); 

Answer 2

for those who read the 2013 post 'on' is a new way to do this, now "live" has been discounted (example from the breakdown on WordPress):

 /*******ajax pagination*******/ jQuery(document).on('click', '#pagination a', function(e){ e.preventDefault(); var link = jQuery(this).attr('href'); jQuery('#content').html('Loading...'); //the 'main' div is inside the 'content' div jQuery('#content').load(link+' #main'); }); 

the .live () function has been depreciated, so use .on () instead. obviously need a jQuery library.