1

I'm using a jQuery/JavaScript bundle called jPlayer to make a playlist for my music blog. The player is at the top of the screen, and I want to be able to let the user click the name of the song at the top and redirect them to the post that it corresponds to.

The jPlayer that I include is written in shorthand, so viewing the js file is not helpful. The element that I need is a link of class .jp-playlist-item.jp-playlist-current. I have asked about this before and the person said to try this, but it didn't work...

$("a.jp-playlist-item").each(function() {
    $(this).replaceWith($(this).clone()) 
}) 
$("a.jp-playlist-item").click(function(){
    alert(1);
})

The site I'm working on is http://www.startingtofeelit.com so you can get a better idea of what I mean.

Jeff B
  • 29,943
  • 7
  • 61
  • 90
jas7457
  • 1,971
  • 5
  • 30
  • 47
  • Are you seeing any error messages in your console? It looks like at the least you are missing some semicolons from your code. – Jeff B Feb 26 '13 at 18:18
  • Also, the click handler may not be on the `a` element. It may be on a parent. If this is the case, you need to stop propagation by returning false from your click handler. Additionally, if this is the case, you wouldn't need the clone solution. – Jeff B Feb 26 '13 at 18:20

3 Answers3

1

you can override the default click behavior by using the event.preventDefault() function, like this.

function clickCallback( event ) {
    event.preventDefault();
    //do more stuff here.
}

$('a.jp-playlist-item').on('click', clickCallback );

Also, after your functionality, you can return false which would immediately stop any further functionality from occurring on the button.

See a more detailed explanation of how to override / halt events here: What's the difference between event.stopPropagation and event.preventDefault?

Community
  • 1
  • 1
Kristian
  • 21,204
  • 19
  • 101
  • 176
  • I've tried this route before. It seems as if jPlayer is somehow overriding it or something. View my code and search for the `($document).ready(function()` and you will see your code there, but clicking the link at the top still just plays the song and does not show the alert that I added to your code. – jas7457 Feb 26 '13 at 18:25
  • `preventDefault()` doesn't `interrupt` the event. It stops the default behavior on the current window, which in most cases is jump to the link's `href` – Arindam Feb 26 '13 at 18:32
0

quick and dirty possible solution:

$("a.jp-playlist-item").click(function(){
    alert(1);
    return false;
})
Zach Lysobey
  • 14,959
  • 20
  • 95
  • 149
0

The method in jquery you are looking for is stopPropagation.

Excerpt:

Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

Using false at the end of callback is not equal to stopPropagation. Read this SO answer (false is == preventDefault() + stopPropagation()). You don't want that right?

Some additional notes from the jquery api page:

  • stopPropagation cannot be used for events tied with live and delegate calls.
  • stopPropagation also works on custom methods fired by trigger() call.
Community
  • 1
  • 1
Arindam
  • 998
  • 1
  • 8
  • 20
  • I tried using `$('a.jp-playlist-item').click(function(event){ event.stopPropagation(); alert("Hi"); });`, but this doesn't work. Am I grabbing the wrong class with my jQuery selector? Sorry I'm making you guys spell this out for me, but nothing seems to want to work. – jas7457 Feb 26 '13 at 18:36
  • So when you say not working, does it not show the alert? In the meanwhile i would try to look at your link – Arindam Feb 26 '13 at 18:37
  • Yeah it is not showing my alert and it still plays the song, which I don't want it to do. http://www.startingtofeelit.com click the name of the song in the top music player to understand what I mean. – jas7457 Feb 26 '13 at 18:39
  • Hey dude, I just did a thorough inspect on all your player code, and unfortunately, the playlist.min.js file uses live to bind the clicks, which was kinds obvious. And for live events, you cannot stop the bubbling. So you cannot get what you want. DO you want me to point you to those lines in that file? Won't be of much use though. – Arindam Feb 26 '13 at 18:52
  • If I unbind the live click on the name of the song, will it also mess up my previous, next, pause, and play buttons on the player as well? As long as those still work, I could care less. Do you see any good solutions? P.S. if this would be easier typing on skype, my sn is jas7457 – jas7457 Feb 26 '13 at 18:55
  • Cannot really say if you can safely `unbind` live on this element. actually cannot say without diving in (which is a nightmare), if you can do it also. A lot of it depends on the order of your code, plugin code. whatever gets read last on live binding would **probably** get the final call. You might have to do a lot of ups and downs, but I don't think that will also help. – Arindam Feb 26 '13 at 18:58
  • btw, if you want, you can set that specific element to `display:none` and have your own HTML. It iwll be very ugly but would **probably** get the job done. – Arindam Feb 26 '13 at 18:58