iOS 独立 HTML5 应用程序“点击”事件未在动态注入的输入上触发

Question

我遇到的问题似乎只在我保存到 iOS 设备的主页屏幕的 HTML5 应用程序的独立模式下出现。

我所说的独立模式是指具有以下 metatag 的 HTML Web 应用程序：

<meta name="apple-mobile-web-app-capable" content="yes">

有问题的javascript（用coffeescript编写）如下：

$( ->
  $(document).on('click', 'input', (e) ->
    alert('click')
  )

  $(document).on('focusout', 'input', (e) ->
    alert('blur')
  )
)

这些是委托事件处理程序，用于处理动态注入的<input> 元素。 alert() 消息在 Mobile Safari 中显示良好。但是，当以独立模式（即从 主 屏幕启动）查看网络应用时，不会触发事件。

如果有帮助，我正在使用 jQuery v1.10.2。

Answer 1

我遇到了一个类似的问题，即动态创建的输入没有光标，或者在您第一次单击/触摸输入时不允许您输入它们。键盘出现，页面滚动，看起来输入已被选中，但实际上并非如此。输入中的第二次触摸/单击将光标置于输入中，并允许输入文本。

我的解决方法是将一个 touchend 事件附加到该特定输入，然后使用 jQuery 的 focus() 以编程方式再次聚焦该输入。我不得不使用 touchend，因为 click 事件不会在独立模式下触发。

下面是一个代码 sn-p，请原谅语法，我使用的是 Backbone。这是我输入的 touchend 调用的方法。

clickedInput: function (e) {

    if (window.navigator.standalone) {

        $(e.currentTarget).focus();

    }

}