Question

I am trying to hide all the label tags on my jQuery Mobile site in an accessibility friendly way. To this end, I am using javascript to apply the class ui-hidden-accessible to every label tag on my site per documentation (http://jquerymobile.com/test/docs/forms/docs-forms.html).

However, my javascript is not working.

Here is a Fiddle demonstrating how the label tag still appears.
http://jsfiddle.net/tW4Xu/

Why is it not working? I have also scrutinized other jQM event handlers such as pageinit and pagecreate:
http://jquerymobile.com/test/docs/api/events.html

My javascript to hide label tags:

// done after page is loaded
$(document).on("pageshow", "label", function(event) {
   $(this).addClass("ui-hidden-accessible");     
});​

Answer 1

It seems like you have a few things going wrong here, although I’m not sure how much of it is coming from the jsfiddle summary and how much is in your full code.

The first thing to note is that ‘pageshow’ is a page transition event. It seems like you might want to use ‘pageinit’ instead. Here’s how the jQM docs describe it:

Triggered on the page being initialized, after initialization occurs. We recommend binding to this event instead of DOM ready() because this will work regardless of whether the page is loaded directly or if the content is pulled into another page as part of the Ajax navigation system.

$( '#aboutPage' ).live( 'pageinit',function(event){  
    alert( 'This page was just enhanced by jQuery Mobile!' );  
});

Note also here that 1) the event is being bound with live() instead of on() (no idea if there’s a difference), and 2) it is being attached to a specific id for a jQM ‘page’. This is part of what is missing in your jsfiddle example. There aren’t any named jQM pages. jQM kind of messes up the whole idea of a page being ready, since everything is in one html file and then gets chunked out using ids and inserted via AJAX.

And so finally: Even though jQM says not to, if your goal is to add this class to every single label on every single jQM page, I would use good-old $(document).ready() and then use $.each() to change them all in one go. Again, from the jQM docs:

However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event.

So there isn’t anything evil about $.ready(), it’s just that this event is only fired once so subsequent page transitions won’t trigger it. But that could be exactly what you want in the first place.

This code works on jsfiddle:

$(document).ready( function(event) {  
  $("label").each( function(index, element) {   
    element.addClass("ui-hidden-accessible");  
  });  
});​

If in your real site you notice that page transitions cause the labels to come back, then you’ll want to bind to something else, again probably ‘pageinit’.

Hope this helps! Apologies for the verbosity…I kind of got going there huh?