jQuery removeData behavior

Question

Вот контекст. Я пытаюсь создать адаптивный дизайн, в котором отображаются прямоугольники с прямоугольниками, как jQuery Mobile, которые выбираются на больших экранах и как MobiScroll выбирает на маленьких экранах. Оригинальный выбор в HTML написано до этого, как

<select data-mini='true' data-inline='true' class='variants' data-role='none' style='display:none'> 
    <option value='1'>Small</option> 
    <option value='2'>Medium</option> 
    <option value='3'>Large</option> 
</select> 

style='display:none' 

бит имеет решающее значение. Без этого вы получаете два элемента управления на маленьких экранах - после выбора оригинала, а затем выбирайте стилизованный стиль. Это не слишком хорошо объяснено в документации MobiScroll.

В моем document.ready коде я вставил что-то вдоль линий

if (600 > $(window).width()) { 
    $('.variants').scroller({ 
     preset: 'select', 
     theme: 'android- 
     ics', 
     rows: 1, 
     mode: 'scroller', 
     display: 'inline', 
     inputClass: 'i-txt', 
     showLabel: false, 
     width: 40, 
     height: 20 
    }); 
} else { 
    $('.variants').css('display', 'inline-block').removeData('role'); 
}​ 

С этим в действие браузера выберите без стилей окно появляется на больших экранах. Я пытаюсь извлечь бит данных-роли через removeData, потому что я хочу, чтобы выбор отображался как выбор jQuery Mobile, который намного красивее. Однако этого не происходит, и removeData ничего не делает. Что я делаю неправильно?

Answer 1

Я понял это! Дело в том, что нет необходимости удалять атрибут data-role = 'none'. Это служит только для того, чтобы сообщать jQuery о том, чтобы не пытаться воссоздать этот элемент. Однако, если вы затем сделать что-то вроде

$('.variants').css('display', 'inline-block').selectmenu() 

вы explcitly преобразования .variants семейства выбирает в меню выбора JQuery Mobile, так что атрибут данных ролей не входит в картину вообще. Измененный код, который делает то, что я искал это

if (600 > $(window).width()) { 
$('.variants').scroller({ 
    preset: 'select', 
    theme: 'android- 
    ics', 
    rows: 1, 
    mode: 'scroller', 
    display: 'inline', 
    inputClass: 'i-txt', 
    showLabel: false, 
    width: 40, 
    height: 20 
}); 
} else { 
$('.variants').css('display', 'inline-block').selectmenu(); 
}​ 

Answer 2

Согласно документации JQuery .removeData()

Метод .removeData() позволяет удалить значения, которые ранее были установлены с помощью .data(). Когда вызывается с именем ключа, .removeData() удаляет это конкретное значение; при вызове без аргументов все значения удаляются. Удаление данных из внутреннего кеша .data() jQuery не влияет на атрибуты данных HTML5 в документе; используйте .removeAttr(), чтобы удалить их.

Похоже, что вы используете данные-атрибут HTML5 в документе .. поэтому используйте .removeAttr('data-role') вместо