pintee Posted May 8, 2013 Share Posted May 8, 2013 (edited) I have an index.php that loads a page.php into a #result div. Page.php in turn has its own links and I have it so that when you click on one of these links it loads the respective page into the SAME #result div. Similarly that loaded page might have its own links and I want to continue loading content into the same div. The code for this is as follows: function loadPage(url){$("#wrapper").load(url, function(){$("#wrapper").find($('a')).each(function(){$(this).on('click', function(e){loadPage($(this).attr('href'));e.preventDefault();});});});} Say page.php has a link to page2.php. At the moment when I open the link to page2.php in a new window, it opens as page2.php. Same if I type the url to page2.php directly into my browser. I want it so that it opens as index.php but with page2.php loaded into its #result div(a duplicate of clicking the link normally in the original window). How do you do this?? I have tried lots of things including setting a session variable and passing to loadPage, but nothing seems to work. Edited May 8, 2013 by pintee Quote Link to comment Share on other sites More sharing options...
codefossa Posted May 8, 2013 Share Posted May 8, 2013 Something like this works. Demo: http://lightron.no-ip.org/tmp/47/ Javascript / JQuery $(document).ready(function() { function updateBinds() { $("#page a").click(function(e) { e.preventDefault(); $("#page").load($(this).attr("href"), updateBinds); return false; }); } updateBinds(); }); Quote Link to comment Share on other sites More sharing options...
Adam Posted May 13, 2013 Share Posted May 13, 2013 The problem is you're only binding the handler to the elements already defined in the page. When new content is loaded in, they're not bound to the handler. What you need to do, and what is more efficient than binding the same handler to every link, is to delegate the responsibility to a parent element that listens for clicks on child elements: $('#wrapper').on('click', 'a', function() { // Handle here });Now even if the content of #wrapper changes, the handler still exists and intercepts any click events on anchors as they bubble up the document. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.