jQuery对话框上的Onclick事件不适用于IOS

Posted

技术标签:

【中文标题】jQuery对话框上的Onclick事件不适用于IOS【英文标题】:Onclick event on jQuery dialog box not working with 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 出了问题。 【参考方案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 开发者工具中,我的代码在所有设备上都运行良好。但在实际设备中它不起作用。而且我无法将我的代码放在这里。

以上是关于jQuery对话框上的Onclick事件不适用于IOS的主要内容,如果未能解决你的问题,请参考以下文章

为啥 onclick 事件不适用于 vue-router?

onClick() 事件适用于一个 div,但不适用于另一个。为啥?

jQuery Validate onclick: false 不适用于复选框或选择

onClick 事件不适用于 android 中的嵌套列表视图项控件

Jquery对话框不适用于图像单击[重复]

JQuery模拟点击页面上的所有a标签,触发onclick事件