data-role = стиль «кнопка» не применяется к функции js

Question

data-role = стиль «кнопка» не применяется к функции js

0

На странице _Layout внутри заголовка у меня есть div, который изначально скрыт при загрузке страницы.

 <div data-role="header">
    <div id="myDiv" data-role="button"></div>
 </div>

...
$(document).bind("pageinit", function () {
     $("div#myDiv").hide();
});

где-то на другой странице действие onclick подключено к функции js, которая добавляет текстовый контент в myDiv, и после этого я показываю myDiv как

<script>
   ...
      var textToAppend = "some text";
      $("div#myDiv").html(textToAppend);  
      $("div#myDiv").show();
   ...
</script>

Div отображается с текстом, но визуально, без ожидаемого стиля (кнопка data-role = "). В firebug div правильно установлена кнопка передачи данных, но визуально нет.

user1765862 29 март 2014, в 14:45

Источник

1

Как выглядит CSS для data-role = "button"?
caspian 29 март 2014, в 13:05
0

при тестировании css корректно применяется перед вызовом функции js. Стандартный класс CSS для кнопки в JQuery Mobile.
user1765862 29 март 2014, в 13:06
0

пожалуйста, проверьте ваш вопрос, я думаю, у вас есть что-то. это работает правильно.
uma 29 март 2014, в 13:15
0

Я не думаю, что это проблема с показом / скрытием, а скорее с изменением текста. Смотрите следующий jsfiddle, который просто обновляет текст - jsfiddle.net/BQMTP
caspian 29 март 2014, в 13:19

Показать ещё 2 комментария

Теги:

javascript

jquery

jquery-mobile

2 ответа

1

Когда вы динамически изменяете содержимое элементов, вы должны воссоздать элемент, поэтому применяется расширенная разметка jquery mobile. В этом случае:

$("div#myDiv").html(textToAppend).button();

js скрипка: http://jsfiddle.net/gfg/Z9xvd/

Я бы рекомендовал этот подход, потому что он не полагается на html-разметку, которая сильно изменилась в версии 1.4 jQuery mobile.

Например, следующий html: <input id="btnShow" type="submit" value="show"> будет:

jQuery mobile 1.3.2

<div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-disabled="false" class="ui-submit ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" aria-disabled="false">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">show</span>
    </span>
    <input id="btnShow" type="submit" value="show" class="ui-btn-hidden" data-disabled="false">
</div>

jQuery mobile 1.4.2

<div class="ui-btn ui-input-btn ui-corner-all ui-shadow">
    show
    <input id="btnShow" type="submit" value="show">
</div>

gfg 29 март 2014, в 13:32

Ещё вопросы

при тестировании css корректно применяется перед вызовом функции js. Стандартный класс CSS для кнопки в JQuery Mobile.
пожалуйста, проверьте ваш вопрос, я думаю, у вас есть что-то. это работает правильно.
Я не думаю, что это проблема с показом / скрытием, а скорее с изменением текста. Смотрите следующий jsfiddle, который просто обновляет текст - jsfiddle.net/BQMTP

caspian · Accepted Answer · 2014-03-29T10-36-00.000Z

Это потому, что роль данных настраивается с некоторыми промежутками, визуализированный код выглядит так:

<div id="myDiv" data-role="button" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-a">
    <span class="ui-btn-inner ui-btn-corner-all">
      <span class="ui-btn-text">some test</span>
    </span>
</div>

Ваш текущий код перезапишет промежутки, и форматирование будет испорчено. Вы должны заменить текст внутреннего диапазона - для обновления текста используйте следующее:

$("div#myDiv .ui-btn-text").text(textToAppend);

js скрипка: http://jsfiddle.net/BQMTP/2/