按钮尺寸设置答案

【问题标题】：Setting of button's dimension按钮尺寸设置
【发布时间】：2019-07-08 17:15:59
【问题描述】：

我正在尝试设置按钮尺寸，但尺寸仅针对活动区域设置但不反映在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 尚未创建。

【问题讨论】：

你想要那个项目一直有那个高度吗？如果是这样，您可以通过 CSS 分配它。
@Twisty 是的，我希望一个按钮具有更大的高度。事实上，可点击区域的高度是我通过style="height:100px" 设置的，但按钮的图形不符合此设置。我不知道你通过CSS分配它是什么意思。我只想更改一个按钮而不是全部。我不知道如何设置按钮的自动创建的父 div 的高度。

标签： jquery jquery-ui jquery-mobile

【解决方案1】：

您的问题是您正在使用 jQuery Mobile 并将其视为一个常见的 jQuery 应用程序。

您不应在 jQuery Mobile 中使用文档就绪事件，因为 jQM 会在文档就绪后触发代码标记增强，从而使您的 CSS 更改无效。

你需要学习使用jQuery Mobile页面事件：https://api.jquerymobile.com/category/events/

你需要做的是用 pagecreate 事件替换 document ready：

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

在此处阅读有关此问题的更多信息：jQuery Mobile: document ready vs. page events

【讨论】：

thx，几乎只需将.on( "pagecreate", 更改为.on( "pagebeforeshow",。