Настройка размера кнопки - PullRequest
Новая
       10

Настройка размера кнопки

0 голосов
/ 14 февраля 2019

Я пытаюсь установить размер кнопки, но размер устанавливается только для активной области, но не отображается пользовательским интерфейсом.

Добавление 

<input type="button" value="Input Button" id="b1" style="height:100px">

приведет к 

<div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-disabled="false" class="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">Input Button</span>
  </span>
  <input type="button" value="Input Button" id="b1" style="height:100px" class="ui-btn-hidden" data-disabled="false">
</div>

следующий код установит размер кнопки после любого щелчка в элементе div правильно 

$(document).ready(function()
{
  $("div").click(function(){
    $("#b1").parent().css('height',100);
  });
});

, но вызов его напрямую в функции готовности не работает 

$(document).ready(function()
{
  $("#b1").parent().css('height',100);
});

Этомне кажется, что родительский div кнопки еще не создан, когда установка высоты выполняется в функции готовности.

РЕДАКТИРОВАТЬ Подтверждено 

$(document).ready(function()
{

  $("#b1").click(function(){
    alert($("#b1").parent().prop('id'));
  });

  alert($("#b1").parent().prop('id'));
});

Который покажетчто при выполнении функции готовности документа родительский div кнопки еще не создан.

1 Ответ

0 голосов
/ 15 февраля 2019

Ваша проблема в том, что вы используете jQuery Mobile и рассматриваете его как обычное приложение jQuery.

Не следует использовать событие готовности документа с jQuery Mobile, так как jQM вызовет улучшение разметки кода после того, как документ будет готоввызвав тем самым аннулирование ваших изменений CSS.

Вам необходимо научиться использовать события страницы jQuery Mobile: https://api.jquerymobile.com/category/events/

Что вам нужно сделать, это заменить готовый документ событием pagecreate: 

$( document ).on( "pagecreate", "#yourPageID", function( event ) {
  alert( "This page was just enhanced by jQuery Mobile!" );
});

Подробнее об этой проблеме читайте здесь: jQuery Mobile: документ готов против событий страницы

...