Question

每次点击导航链接（a.nav）时，我都会尝试触发事件。对于Safari，它按预期工作;但是，在每个其他浏览器中，它仅在第一次单击链接时触发。出于某种原因，我没有得到渴望的结果，有什么我想念的吗？

<!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>

我希望我不要模糊......我非常感谢你的帮助。

Answer 1

我认为您的案例中不需要使用live()。这是因为你动态添加了html。或者，当你有相当数量的元素绑定到同一个事件处理程序时（而不是click（），它会绑定每个链接的各个处理程序）。

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

我认为问题可能是你的选择器。尝试选择<a>代码

http://jsfiddle.net/EmvQk/

编辑：

编辑代码以注释掉sprite（）方法并添加alert（），如下面的注释所示。我非常有信心问题来自sprite（）调用，这个小测试将确定是否是这种情况。

您的Css需要遵循库所需的一组规则才能正常运行。在查看库示例并根据您的#sprite css规则后...尝试进行这些更改：

#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;
}

Answer 2

这是Spritely的一个问题，从版本0.5开始，他们有一个destroy（）方法，所以......

$("#spark").click(function() {
var $spark = $("#spark");
$coil.sprite({
fps: 30, 
no_of_frames: 12, 
on_last_frame: function(obj) {
    obj.spStop(); // stop the animation on the last frame
        obj.spState(1);
        killSprite($spark);
    }
});
});

function killSprite(yourEl){
yourEl.destroy();
}

我在动画的最后一帧调用的函数中弹出了destroy方法，所以希望它不会导致任何问题

Answer 3

应该是那个

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

本身并不能多次使用。您是否尝试过两次调用该函数，看看会发生什么。

要测试您的点击处理程序是否是罪魁祸首，请向点击处理程序添加提醒，并查看问题是您的点击处理程序还是上面提到的代码。

Answer 4

在我看来，您的问题可能与jQuery的spritely插件有关。我设置了一个快速测试：http://jsfiddle.net/Htm4y/，这对我有用（在Chrome中）。在该示例中，单击.nav链接将触发jQuery切换。我需要看看你的css来确定该div中应该是什么，但必须正确配置才能使用sprite来为它设置动画。

如何在每次单击链接时触发事件（使用JQuery）？

4 个答案: