Links not working in pages [b]load[/b]ed via jQuery.

trq · 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>

trq · 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.

Sign In

Links not working in pages [b]load[/b]ed via jQuery.

Recommended Posts

trq

Link to comment

Share on other sites

trq

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information