Question

我有一个小脚本，我在“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>

Answer 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”。

Answer 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

}）;

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

2 个答案: