Как заставить событие срабатывать при каждом нажатии на ссылку (с использованием JQuery)? - PullRequest
Новая
       1

Как заставить событие срабатывать при каждом нажатии на ссылку (с использованием JQuery)?

1 голос
/ 23 июня 2011

Я пытаюсь вызвать событие каждый раз, когда нажимается навигационная ссылка (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>

Надеюсь, я не слишком смутен ... Я очень признателен за помощь.

Ответы [ 4 ]

2 голосов
/ 23 июня 2011

Я не вижу необходимости использовать live() в вашем случае. Это когда вы динамически добавили HTML. Или, когда у вас есть приличное количество элементов, которые будут привязаны к одному и тому же обработчику событий (вместо click (), который будет привязывать отдельные обработчики для каждой ссылки). 

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

Я думаю, что проблема может быть в вашем селекторе. Попробуйте просто выбрать <a> теги

http://jsfiddle.net/EmvQk/

EDIT:

Измените свой код, чтобы закомментировать метод sprite () и добавить предупреждение (), как указано в комментариях ниже. Я вполне уверен, что проблема связана с вызовом 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;
}
1 голос
/ 11 апреля 2012

Это проблема со Sprittle, так как в версии 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 в функцию, которая вызывается в последнем кадренадеюсь, это не вызовет проблем

0 голосов
/ 23 июня 2011

Мне кажется, что ваша проблема может быть со спрайтовым плагином для jQuery.Я настроил быстрый тест на: http://jsfiddle.net/Htm4y/,, который работал для меня (в Chrome).В этом примере щелчок по ссылке .nav запускает переключатель jQuery.Мне нужно будет увидеть ваш css, чтобы выяснить, что должно быть в этом div, но он должен быть настроен правильно, чтобы спонтанно его оживить.

0 голосов
/ 23 июня 2011

Должно быть, что 

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

само по себе не работает несколько раз. Вы пытались вызвать эту функцию дважды и посмотрите, что произойдет.

Чтобы проверить, является ли ваш обработчик кликов виновником, добавьте предупреждение в обработчик кликов и посмотрите, является ли проблема вашим обработчиком кликов или приведенным выше кодом.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...