Событие щелчка jQuery с селектором класса срабатывает только один раз

0

Я использую классифицированные ссылки для изменения содержимого FlowPlayer. Вот рабочая версия: http://jsfiddle.net/r9fAj/

На моей фактической странице, используя тот же код, первая нажатая ссылка работает нормально. Вторая функция не запускает функцию щелчка. Даже если я прокомментирую все, кроме console.log()...

$('.playerLink').click( function() {
    audioPlayer.unload();
    initAudioPlayer();
    $('#player').css('display', 'block');
    $('#player').animate({"height":"50px"}, 1000);
    var newClip = {'url':$(this).attr('ajax-data'),'autoplay':true};
    audioPlayer.play(newClip);
    console.log('playing ' + $(this).attr('ajax-data'));
});

HTML-код

<a href="#" ajax-data="/audio/episodes/09_27_2013_Happy_Hour_88509726.mp3" class="playerLink">Listen</a>
<a href="#" ajax-data="/audio/episodes/10_04_2013_Happy_Hour_3478965.mp3" class="playerLink">Listen</a>

<a id="flowplayer" href="/audio/episodes/09_27_2013_Happy_Hour_88509726.mp3"></a>

И игрок инициализировался так:

var audioPlayer;

var initAudioPlayer = function () {
    $f("flowplayer", "/player/flowplayer-3.2.16.swf", {
        plugins: {
            controls: {
                fullscreen: false,
                autoHide: false,
            }
        },
        clip: {
            autoPlay: false,
            url: "",
        }
    });

    audioPlayer = $f();
};
initAudioPlayer();

Поскольку jsFiddle работает много раз, я предполагаю, что что-то еще на моей странице не позволяет работать с вторым кликом(), но у консоли нет ошибок для меня.

Поэтому мой вопрос заключается в том, чтобы не опубликовать весь код сайта, как я могу отлаживать это?

  • 0
    Делаете ли вы что-нибудь для динамического изменения классов?
  • 0
    Никаких изменений класса. Используя Chrome Inspector, я вижу класс по ссылкам.
Показать ещё 2 комментария
Теги:
jquery-selectors
flowplayer

2 ответа

0
Лучший ответ

Итак, это первый сайт, который я сделал, когда контент доставляется через AJAX, а внутренние ссылки пойманы

 $("a:not([href^='http://'])").click( function(e) { 
    var url = $(this).attr("href");
    var title = ($(this).attr("title")) ? ': ' + $(this).attr("title") : '';
    e.preventDefault(); 
    if(url!=window.location){
       window.history.pushState({path:url},title,url);
       $('#contentMain').load(url);
        document.title = "It New Orleans" + title;   
    }
});

По какой-то причине он работает один раз, чтобы щелкнуть ссылку с классом, но второй раз получает предупреждениеDefault() ed.

<a href="#" ajax-data="/audio/foo.mp3" class="playerLink">Listen</a>

Исправление добавило [href^='#'] к not(), например

$("a:not([href^='http://'],[href^='#'])").click( function(e) {

Поделиться
0

Похоже, ваш обработчик события .click() только для первой ссылки, которую вы нажимаете, а не для дополнительных кликов. Для общей отладки вы можете взять свою страницу, которая не работает, и постепенно комментировать/удалять другую часть JS и HTML, пока вы не сможете заставить ее работать правильно. Или начните с минимальной суммы, которая работает (скрипка), и постепенно добавьте в остальное, чтобы увидеть, когда она перестанет работать.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню