具有类选择器的jQuery click事件仅触发一次

Question

I'm using classed links to change FlowPlayer content. Here is a working version: http://jsfiddle.net/r9fAj/

In my actual page using the same code the first link clicked works fine. The second one does not fire the click function at all. Even if I comment out everything but the 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 like so

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

And the player initialized like so:

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();

Since the jsFiddle works over and over I assume something else in my page is preventing the second click() from working but the console has no errors for me.

So my question is, short of posting the whole site's code how do I pursue debugging this?

Answer 1

So it sounds like your .click() event handler is only being fired for the first link you click and not for additional clicks. For general debugging, you could take your page that is not working and gradually comment out / remove other part of the JS and HTML until you are able to make it work correctly. Or start with the minimal amount that is working (the fiddle) and gradually add in the rest to see when it stops working.

Answer 2

So this is the first site I have done where content is delivered via AJAX and internal links are caught by

 $("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's New Orleans" + title;   
    }
});

For some reason it does work once to click a link with the class but the second time gets preventDefault()ed.

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

The fix was adding [href^='#'] to not() eg

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