【问题标题】:Onclick event on jQuery dialog box not working with IOSjQuery对话框上的Onclick事件不适用于IOS
【发布时间】:2016-07-26 12:55:54
【问题描述】:

我正在使用 IOS 设备并开发应用程序。我在对话框中遇到了一个关于 onclick 事件的问题。我在对话框中有一个文本框,需要使用 onclick 事件调用一个函数。但它不适用于 IOS(Ipad/iPhone)。有人可以检查一下并建议我。下面是在 IOS 中不起作用的简单代码。我尝试了 ontouchstart 事件,效果很好,但是 onclick 有什么问题?

-来自对话框的代码

<input type="text" onclick="hello();">
<script>
 function hello()
 {
    alert(2222);
 }
</script>

【问题讨论】:

  • cursor:pointer 样式添加到您的元素中,看看会发生什么:&lt;input type="text" style="cursor:pointer" onclick="hello();"&gt;
  • @akazemis 谢谢,但它仍然无法在 IOS 中运行,可能是 IOS 出了问题。

标签: javascript jquery html ios iphone


【解决方案1】:

IOS 没有注册绑定到在 DOM LOADS 之后添加的元素的点击/触摸事件是一个问题。

在您对以下更改进行编码时,它应该可以工作。

<input type="text" onclick="hello();" style="cursor:pointer">

以上行将修复您的代码。

您也可以参考下面的链接,深入了解为什么 IOS 不注册点击/触摸事件。

http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html

希望这能让您更好地理解。感谢您的 cmets。

【讨论】:

  • 谢谢,这段代码在简单页面和 IOS 上运行良好,但如果我把它放在从登陆页面打开的对话框中,那么它不会触发点击事件。
  • @Mahendra Rathod 如果你不介意你能在这里分享一下结构吗,一旦我看到对话框,我一定会为你提供帮助。如果可能的话?
  • @MahendraRathod 还有你为什么不尝试实施以下解决方案
  • 我也尝试过这个解决方案。但可能是对话框和事件出现问题,因此再次单击事件不会触发。
  • @MahendraRathod 只是一个建议,希望你不要介意。既然您使用的是对话框,为什么不尝试将对话框的结果与事件绑定。结果将是真假。像我下面提到的例子一样?
【解决方案2】:

我认为警报不适用于 ios。

【讨论】:

  • 同样改变光标不会改变光标以外的任何东西。
  • alert 在我检查过的 IOS 上运行良好。
  • @bugsiesegal 实际上对于 IOS 来说这是一个有趣的解决方法。 Safari 不会将事件侦听器绑定到“不可点击”元素。所以如果一个 div 在 Safari 中是不可点击的,添加 cursor: 指针会让浏览器认为它是一个可点击的元素,然后它会绑定一个监听器。
【解决方案3】:

HTML 是

<button id="demo" type="text" onclick="myFunction()" style="padding:10px;">

JS 是

function myFunction() {
            var x;
            if (confirm("Press a button!") == true) {
                x = "You pressed OK!";
            } 
            else {
                x = "You pressed Cancel!";
            }
            document.getElementById("demo").innerHTML = x;
        }

我在 chrome 开发者工具上检查了 IOS 设备、iphone/ipad。工作正常,您能确认一下吗?

【讨论】:

  • 在 chrome 开发者工具中,我的代码在所有设备上都运行良好。但在实际设备中它不起作用。而且我无法将我的代码放在这里。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2015-10-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多