jQuery Mobile：在 Webkit 浏览器中刷新输入小部件值答案

【问题标题】：jQuery Mobile: Refresh input widget value in Webkit BrowsersjQuery Mobile：在 Webkit 浏览器中刷新输入小部件值
【发布时间】：2011-07-02 08:00:59
【问题描述】：

我正在使用 jQuery Mobile 构建一个网络应用程序。我正在尝试使用 javascript 在绑定到“pageshow”事件的函数中设置输入小部件的值。它在 Firefox 中有效，但在 Webkit 浏览器（Safare、Mobile Safari、Chrome...）中失败。

以下内容被定义为 $(document).ready() 函数的一部分：

$('#decimal').live('pageshow', function(event, ui){
  $('#dLat').val(gps.latitude)
  $('#dLong').val(gps.longitude);
  gps.altitude = null;
});

JQM“页面”的html是：

<div data-role="page"  id="decimal" data-theme="c" > 
  <div data-role="header" data-backbtn="false">
    <h1>Decimal Entry</h1>  
  </div> 
  <div data-role="controlgroup"  class="dInput">
    <label for="dLat">Lat: </label>
    <input type="number" class="dInput" name="dLat" id="dLat" value=""><br>
    <label for="dLong">Lon: </label>
    <input type="number" class="dInput" name="dLong" id="dLong" value=""><br>
  </div>
  <a href="#manual" data-role="button" data-inline="true" id="btnDecimalSubmit"> Done </a>
</div>

Webkit 浏览器是否需要某种额外的刷新？如果是这样，我该如何为元素执行此操作？

提交伪按钮也无法关闭对话框，但仅限于 Webkit 浏览器。

【问题讨论】：

尝试 pagebeforeshow 而不是 pageshow

标签： refresh jquery-mobile

【解决方案1】：

我通过将代码放置在一个独立页面中来测试您的代码，如下所示（使用 jQM alpha），这在 WebKit 中有效。我很欣赏这不是作为对话框运行的，但我不知道 WebKit 有任何差异。

我怀疑问题的一部分可能是您将pageshow 包裹在$(document).ready 中——您不需要这样做。这是我的测试页面中 Javascript 部分的外观：

<script type="text/javascript">
    $('#decimal').live('pageshow', function(event, ui){
     $('#dLat').val(55.5603);
     $('#dLong').val(56.1356);
  });
</script>

（我删除了gps 变量并设置了硬编码值，因为显然我没有那段代码）。

【讨论】：

普尔我很困惑。 pageshow 的东西被包裹在 $(document).ready 中，但是取出来似乎没有任何影响。
感谢您的关注！我在link 使用静态数据构建了一个小型测试用例，它似乎工作正常。使用地理定位link 的大（杂乱）版本失败。我对如何进行调试感到困惑。我在 pageshow 函数中添加了一个 console.log 语句，看起来它永远不会在 Chrome 中被触发。我会报告我最终在这里找到的任何东西。感谢您的帮助！
在研究这个问题时，我看到权威人士写的 jQuery Mobile 介绍中包含诸如“每个页面都必须符合 jQuery Mobile 标准”之类的短语。 ...但他们似乎从未提供指向该“标准”的链接。显然他们是正确的。我对页面进行了一些更改，它现在可以工作（加上或减去一些格式问题）。但是我不知道哪个更改解决了问题！ jQuery Mobile 明显领先于 jQuery Mobile 文档。
@RAMilewski 很高兴它已排序！ FWIW，如果页面事件没有与被操作的特定页面 id 绑定，并且被调用的代码没有在页面代码所在的物理 html 文件中引用，那么事情就会出错。很奇怪我同意你:-)

【解决方案2】：

嘿，我以前遇到过这个问题。尝试使用 mobileinit 事件而不是 document ready 事件。

$(document).bind("mobileinit", function() {
$("#somePage").live( 'pageshow', function( event ) {
    Do some stuff here

这为我解决了一个类似的问题，我希望它有所帮助。

【讨论】：