trq Posted July 26, 2010 Share Posted July 26, 2010 I'm working on a rather simple jQuery plugin designed to dynamically load pages when you click on an #anchor. This is all working. The problem is, that some of the pages being loaded also contain the #anchor links, these are not working. In fact, no links within the dynamically loaded pages are working. The plugin: (function($) { $.fn.extend({ stageloader: function(options) { var attach = function() { var $page = $(this).attr('href'); $(ops.stage).fadeOut(ops.fade, function() { $(ops.stage).load( ops.location + $page.replace('#', '') + ops.extension ); $(ops.stage).fadeIn(ops.fade, function() { $(ops.stage).find('a[href^="#"]').click(attach); }); }); } var getUri = function(def) { var uri = document.location.toString(); if (uri.match('#')) { return '#' + uri.split('#')[1]; } if (def) { return def; } return ''; } var defaults = { init: '#home', stage: '#content', location: '/', extension: '.html', fade: 10 } var ops = $.extend(defaults, options); $(ops.stage).load( ops.location + getUri(ops.init).replace('#', '') + ops.extension ); $(ops.stage).fadeIn(ops.fade); $(this).find('a[href^="#"]').click(attach); return this } }); })(jQuery); The html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" media="screen" href="assets/css/styles.css" /> </head> <body> <div id="wrapper"> <div id="inner"> <div id="header"></div> <div id="content"></div> </div> <div id="nav"> <ul id="sliding"> <li><a href="#home">Home</a></li> <li><a href="#author">About The Author</a></li> <li><a href="#books">About The Books</a></li> <li><a href="#videos">Videos</a></li> <li><a href="#downloads">Downloads</a></li> <li><a href="#games">Games</a></li> </ul> </div> <div id="push"></div> </div> <div id="footer"></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script src="assets/js/jquery.slide.js"></script> <script src="assets/js/jquery.stageloader.js"></script> <script> $(document).ready(function() { $('body').stageloader({location: 'assets/pages/'}); }); </script> </body> </html> The author.html file: <h2>About the Author</h2> <h3>Suzanne Collins</h3> <p> Some text </p> <p> <ul> <li>Download <a href="assets/pdfs/qandq.pdf" target="_blank">the PDF</a></li> <li>Read the <a href="#answers">answers to your Burning Questions</a></li> </ul> </p> <p style="float:right"><img src="assets/imgs/sc.jpg" alt="author" /></p> Quote Link to comment https://forums.phpfreaks.com/topic/208890-links-not-working-in-pages-bloadbed-via-jquery/ Share on other sites More sharing options...
trq Posted July 26, 2010 Author Share Posted July 26, 2010 Further test reveal that normal links are indeed working within IE (not FF), but the anchor type one are still broken. Funny thing is, within FF they link's don't even have the cursor set as a pointer. its like there not being recognized as links at all. Yet, within the attach method. If I change: $(ops.stage).fadeIn(ops.fade, function() { $(ops.stage).find('a[href^="#"]').click(attach); }); to: $(ops.stage).fadeIn(ops.fade, function() { $(ops.stage).find('a[href^="#"]').each(function() { console.log($(this)); }); }); The anchors are displayed. Quote Link to comment https://forums.phpfreaks.com/topic/208890-links-not-working-in-pages-bloadbed-via-jquery/#findComment-1091145 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.