Question

我正在尝试设置按钮尺寸，但是该尺寸仅是为活动区域设置的，而不会由ui反映。

添加

<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);
  });
});

但是在ready函数中直接调用它不起作用

$(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。

Answer 1

您的问题是您正在使用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: document ready vs. page events

按键尺寸的设定

1 个答案: