Как скрыть все теги ярлыков на моем сайте jQuery Mobile для удобства доступа?

Question

Я пытаюсь скрыть все теги меток на своем сайте jQuery Mobile в удобной форме. Для этого я использую JavaScript для применения класса ui-hidden-accessible на каждый ярлык на моем сайте в соответствии с документацией ( http://jquerymobile.com/test/docs/forms/docs-forms.html).

Тем не менее, мой JavaScript не работает.

Вот Скрипка, демонстрирующая, как тег метки все еще появляется. http://jsfiddle.net/tW4Xu/

Почему это не работает? Я также изучил другие обработчики событий jQM, такие как pageinit и pagecreate: http://jquerymobile.com/test/docs/api/events.html

Мой JavaScript, чтобы скрыть метки тегов:

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

Answer 1

Похоже, у вас здесь что-то пошло не так, хотя я не уверен, сколько из этого исходит из сводки jsfiddle и сколько в вашем полном коде.

Первое, на что нужно обратить внимание, это то, что "pageshow" - это событие перехода страницы. Кажется, что вы могли бы вместо этого использовать "pageinit". Вот как документы JQM описывают это:

Запускается на инициализируемой странице после инициализации. Мы рекомендуем связываться с этим событием вместо DOM ready(), потому что это будет работать независимо от того, загружается ли страница напрямую или содержимое перетаскивается на другую страницу как часть системы навигации Ajax.

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

Также обратите внимание, что 1) событие связывается с live() вместо on() (не знаю, есть ли разница), и 2) оно прикрепляется к определенному идентификатору для jQM 'page'. Это часть того, чего не хватает в вашем примере с jsfiddle. Там нет никаких именованных страниц JQM. В некотором роде jQM портит идею о готовности страницы, поскольку все находится в одном html-файле, а затем разбивается на части с использованием идентификаторов и вставляется через AJAX.

И наконец: несмотря на то, что jQM говорит "нет", если ваша цель - добавить этот класс к каждой метке на каждой странице jQM, я бы использовал старый добрый $(document).ready(), а затем использовал бы $.each () поменять их все за один раз. Опять же, из документов JQM:

Однако в jQuery Mobile Ajax используется для загрузки содержимого каждой страницы в DOM во время навигации, а обработчик готовности DOM выполняется только для первой страницы. Чтобы выполнить код всякий раз, когда новая страница загружается и создается, вы можете привязаться к событию pageinit.

Так что в $.ready () нет ничего плохого, просто это событие вызывается только один раз, поэтому последующие переходы страниц не вызовут его. Но это может быть именно то, что вы хотите в первую очередь.

Этот код работает на jsfiddle:

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

Если на вашем реальном сайте вы заметили, что переходы страниц приводят к возвращению меток, тогда вам нужно привязать что-то еще, опять же, вероятно, "pageinit".

Надеюсь это поможет! Извиняюсь за многословие... Я как-то пошёл туда, а?

Answer 2

http://jsfiddle.net/tW4Xu/2/

Тот? Не уверен, что ваши конкретные требования для использования on('pageshow')в моей скрипке я использовал

$(function() {
   $('label').addClass("ui-hidden-accessible");     
});​

Answer 3

Не используйте в прямом эфире его устарела с jquery 1.7. У вас была правильная идея, просто сделайте это до просмотра страницы и убедитесь, что вы используете идентификатор страницы. Также в вашей скрипке верхнее выпадающее меню меняется с загрузки на без переноса (голова). У меня были проблемы с этим в прошлом.

$(document).on("pageinit", "#thepageid", function(event) {
   $('label').addClass("ui-hidden-accessible");     
});​

Это будет работать для всех ваших страниц JQM.

$(document).on("pageinit", "[data-role=page]", function(event) {
   $('label').addClass("ui-hidden-accessible");     
});​