使用 Jquery Mobile 编写脚本仅在刷新后生效答案

【问题标题】：Scripting with Jquery Mobile takes effect only after refresh使用 Jquery Mobile 编写脚本仅在刷新后生效
【发布时间】：2012-05-30 12:29:35
【问题描述】：

我有一个在“HEAD”标签下运行的小脚本，与 jquery mobile 一起使用。它根据屏幕宽度调整图像大小。它工作正常，但只有在每次刷新该页面后才能工作。无论如何，我每次进入页面时都可以强制刷新吗？或者有更好的方法吗？

脚本如下：

<script>
  $( document ).ready( function()
  {
     $width = $( '#content' ).width();
     $( '#content img' ).css( 
     {
        'max-width': $width, 'height': 'auto'
     } );
   } );
</script>

谢谢

-----已更新-----

<body>
  <script>
    $( document ).live( 'pageload', function()
    {
      var maxWidth = $( '.content' ).width();
      $( '.content img' ).css( "max-width", maxWidth );
      $( '.content img' ).css( "height", auto );
    });
  </script>
</body>

【问题讨论】：

标签： jquery mobile refresh

【解决方案1】：

首先，不要将您的 javascript/jquery 代码放在 HEAD 部分，确保它在 BODY 中，因为 jquery mobile 会过滤掉那里的代码。 Jquery mobile 仅使用 HEAD 中的 TITLE。

使用这样的东西：

$(document).bind("pagecreate", function() {
    // make sure all submit buttons are disabled to being with
    $('input#submit').each(function() {
        $(this).button("disable");
    });
});

我知道这个示例不是您正在寻找的功能，但概念是相同的。像我一样将您的事件绑定到“pagecreate”。

【讨论】：

【解决方案2】：

您是否使用 JQM 的 AJAX 页面加载？如果是，则应绑定到 pageload 事件。所有事件都在这里描述http://jquerymobile.com/demos/1.1.0/docs/api/events.html。在pageload 事件处理程序中，您可以添加代码来调整图像大小。

您还可以绑定到每个页面的pageshow 事件。

$('[data-role=page]').live('pageshow', function () {
//Image resize code here

});

【讨论】：

您好，感谢您的建议。我确实使用 pageload 事件更新了代码。但我似乎得到了同样的结果。页面完全加载后图像正在调整大小，但直到另一个事件发生（即您转到另一个页面）时才会显示它。我一直在摆弄事件触发器，但似乎没有任何效果。任何的想法？谢谢
为答案添加了另一个选项
也试过了，但 $width 似乎一直为 0。我认为这是因为在加载页面时，包括 div 在内的所有元素都被隐藏了。无论如何我可以找出隐藏元素的宽度（）？