JavaScript 按钮不再适用于移动设备

Question

所以我正在解决我们应用中的一个问题，但无法解决。我没有写基础代码，只能注入CSS和Javascript。有一个带有 ID 的非常基本的 span 元素，下面是 Javascript 的片段，基本上是 "if element with ID submitButton is clicked, submit form #createForm"。但是，在移动设备上它坏了，浏览器没有给出任何错误。

<form method="post" action="page.html" id="createForm">
    <span id="submitButton">Submit form</span>
</form>
<script> 
    $("#submitButton").on("click", function (event) {
        if (attributeEqualsDisabled($(this).attr('disabled'))) {
            return true;
        }
        $("#submitButton").attr('disabled', true);
        $('#createForm').submit();
    });
</script>

现在，即使在使用 "display as iphone" 模式 Chrome 时，这在桌面浏览器上也能完美运行。你可以点击按钮，一切正常。

但是在移动版 Safari 上以及将页面添加为 Web 应用程序时，该按钮不再有效。当您按下它时，页面只会滚动到顶部并且什么都不做。我已经通过我的 Mac 检查出来，一切看起来都很正常，与桌面上的完全一样。我什至可以通过控制台在我的 iphone 上运行 $("#submitButton").click();，它运行完美。

控制台中没有错误或警告。有没有人有任何建议来解决这个问题？遗憾的是我无法直接访问代码，因为一切都在 IP 锁定服务器上。

有没有什么方法可以准确地看到当我点击按钮时发生了什么？我尝试了 "Timelines" 选项卡，但当我按下按钮时它什么也没显示。

Answer 1

另一个用户的回答修复了它：

感谢 Robin Zigmond 为我指明了正确的方向。我在想有什么东西阻止了点击事件的触发，但它根本没有接受它，因为我需要跟踪 touchstart 事件。

链接的答案确实提到通过将 cursor:pointer; 添加到带有 CSS 的按钮找到了更好的解决方案，但是我的元素已经有了，所以在这种情况下显然不起作用。

添加此功能以检测手机上的点击：

$('#submitButton').bind( "touchstart", function(e){
    if (attributeEqualsDisabled($(this).attr('disabled'))) {
        return true;
    }
    $("#submitButton").attr('disabled', true);
    $('#createForm').submit();
});

JavaScript 按钮不再适用于移动设备

JavaScript button no longers works on mobile

javascript

jquery

mobile-safari

web-developer-toolbar