Question

I’m using the soundcloud plugin and by default it displays the tracklist. What I need to do is using a button to toggle the visibility of that list so I edited the .js code and now it adds a button with the class “tplaylist” next to the tracklist. For some reason I can’t hide the list neither make it visibble again. With css I can set display:none; and it disappears but I can’t show it again. My code is:

$(".sc-player ol.sc-trackslist").css('display', 'none');
$(".sc-player ol.sc-trackslist").css('display', 'block');

$(".tplaylist").click(function(){
  $(".sc-player ol.sc-trackslist").toggle();
});

This code for some reason has no effect over the tracklist. If I remove from the stylesheet display:none; the list is visible and what is written here in JQuery doesn’t hide it at all. I also tried the pure css solution and it doesn’t work either.

Thanks for your help!

Answer 1

Those elements are created after your code, so the event wasn’t attached to the elements.

You have two options:

1. write you code after the where the plugin code written.
2. use a delegate event like on or delegate.

---

on version:

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

$('#container').on('click', '.tplaylist',function(){
    $('.sc-player ol.sc-trackslist').toggle();
});

on useful docs:

Event handlers are bound only to the currently selected elements; they
must exist on the page at the time your code makes the call to .on().
To ensure the elements are present and can be selected, perform event
binding inside a document ready handler for elements that are in the
HTML markup on the page. If new HTML is being injected into the page,
select the elements and attach event handlers after the new HTML is
placed into the page. Or, use delegated events to attach an event
handler, as described next.

Delegated events have the advantage that they can process events from
descendant elements that are added to the document at a later time. By
picking an element that is guaranteed to be present at the time the
delegated event handler is attached, you can use delegated events to
avoid the need to frequently attach and remove event handlers. This
element could be the container element of a view in a
Model-View-Controller design, for example, or document if the event
handler wants to monitor all bubbling events in the document. The
document element is available in the head of the document before
loading any other HTML, so it is safe to attach events there without
waiting for the document to be ready.