Home/ Questions/Q 6069559
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T09:50:07+00:00

I’m trying to fire an event every time a navigation link (a.nav) is clicked.

  • 0

I’m trying to fire an event every time a navigation link (a.nav) is clicked. For Safari, it works as expected; however, in every other browser it ONLY fires the first time a link is clicked. For some reason, I’m not getting the desire result, is there anything I’m missing?

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PatrickCason.com</title>

<link href="stylesheet.css" rel="stylesheet" type="text/css">

<!--[if IE 7]>
    <style type="text/css">
        #main, #namespace {
            padding-right: 115px;
        }

        #textarea {
            padding-right: 115px;
            padding-top: 15px;
        }

        #social {
            bottom: 82px;
        }
    </style>
<![endif]-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script src="jquery.history.js" type="text/javascript"></script>
<script src="spritely.js" type="text/javascript"></script>
<script src="ajax.js" type="text/javascript"></script>

<script type="text/javascript">
    $(window).load(function() {
        $("#main").show("slide", { direction: "up" }, 1000);
        $("#copyright").show("slide", { direction: "down" }, 500);
        $("#main").effect("bounce", { times: 1, distance: 5 }, 250);

        $('a.nav').live('click', function() {
            //For some reason... this only works with the first time I click a nav link... herein lies the problem!
            $('#spark').sprite({fps: 30, no_of_frames: 12, play_frames: 12});
        });
    });
</script>
</head>

<body>
    <div id="floater"></div>
    <div id="container">
        <div id="main">
            <div id="spark"></div>
            <div id="namespace"><span style="font-size: 20px;">hi.  i am </span><h1 style="display: inline;  font-size: 36px;">Patrick Cason</h1><span style="font-size: 20px;">.</span></div>
            <div id="nav">
                <ul>
                    <li><a href="#contact" class="nav">Contact Me!</a></li>
                    <li><a href="#about" class="nav">About</a></li>
                    <li><a href="#links" class="nav">Links</a></li>
                    <li><a href="/blog/" target="_blank" class="nav">Blog</a></li>
                </ul><br>
                <p><b>Phone:</b><br><span style="font-size: 24px;  font-weight: bold;">615.339.4300</span></p>
                <p><b>Email:</b><br><a href="#contact" class="nav">pcason@comcast.net</a></p>
            </div>
            <div id="social">
                <ul>
                    <li><a href="http://www.facebook.com/mntlinstituteflr" target="_blank"><img src="images/facebook.png"></a></li>
                    <li><a href="http://twitter.com/#!/cereallarceny" target="_blank"><img src="images/twitter.png"></a></li>
                    <li><a href="http://www.linkedin.com/pub/patrick-cason/1a/bb5/229" target="_blank"><img src="images/linkedin.png"></a></li>
                    <li><a href="http://www.google.com/" target="_blank"><img src="images/feed.png"></a></li>
                </ul>
            </div>
            <div id="home"><a href="#home" class="nav"><img src="images/home.png"></a></div>            
            <div id="textarea">
                <div id="content"></div>
            </div>
        </div>
        <div id="shadow"></div>
        <script>
            $(window).load(function () {
                $("#shadow").fadeIn(1250);
            });
        </script>
        <div id="copyright">
            Copyright &copy; 2011 Patrick Cason.  All rights reserved.
        </div>
    </div>
</body>
</html>

I hope I’m not being to vague… I’d really appreciate the help.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I don’t see the need for using live() in your case. That is for when you have dynamically added html. Or, when you have a decent number of elements that will bind to the same event handler (rather than click() which would bind individual handlers for each link).

    $('a').click(function() {
            $('#spark').sprite({fps: 30, no_of_frames: 12, play_frames: 12});
        });

    I think the problem might be your selector. Try just selecting <a> tags

    http://jsfiddle.net/EmvQk/

    EDIT:

    Edit your code to comment out the sprite() method and add an alert() as indicated in the comments below. I am pretty confident the problem is stemming from the sprite() call and this little test will determine if that is the case.

    Your Css needs to follow the set of rules that the library requires in order to function properly. After reviewing the library example and based on your #sprite css rule … Try making these changes:

    #sprite 
{           
background: transparent url(images/spark.png) 0 0 no-repeat;
position: absolute;
top: 0;
left: 223px;
width: 156px;
height: 567px;
z-index: 2000;
cursor: pointer;
}
    • 0