在Safari中未触发JQuery Click事件？

问题描述：

我想要做一些事情，当用户从选择框中选择一个选项 - 尽可能简单？我使用JQuery 1.3.1来注册一个带有选择框ID的点击处理程序。一切都很好，直到我使用Chrome和Safari进行测试，发现它不起作用。在Safari中未触发JQuery Click事件？

火狐3.05 - YES
IE 7.0.5730.13 - YES
IE6Eolas - YES
Sarafi 3.2.1 - NO
铬1.0.154.43 - NO

见代码如下：

<html> 
<head> 
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> 
    <script language="javascript"> 
    $(document).ready(function(){ 
     $('#myoption').click(function() { alert('Select Dropdown was clicked: '+ $('#myoption').val()); }); 
    });  
    </script> 
</head> 
<body> 
    <select id="myoption"> 
    <option value="A">A</option> 
    <option value="B">B</option> 
    </select> 
</body> 
</html>

任何人都知道我应该为此工作做什么？警报最终会被触发，但只有在双击选择框后才会触发警报。

答

我发现我的问题。对于选择框，您需要为“更改”事件注册处理程序，而不是“点击”事件。 Firefox和IE使用click事件很奇怪。

综上所述，下面的代码工作在所有浏览器：

<html> 
<head> 
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> 
    <script language="javascript"> 
    $(document).ready(function(){ 
     $('#myoption').change(function() { alert('Select Dropdown was clicked: '+ $('#myoption').val()); }); 
    });   
    </script> 
</head> 
<body> 
    <select id="myoption"> 
    <option value="A">A</option> 
    <option value="B">B</option> 
    </select> 
</body> 
</html>

我认为“更改”在IE中不起作用。 IIRC，它在元素失去焦点之前不被触发。 – Tomalak 2009-01-23 08:42:57

答

Safari和Chrome都是基于WebKit浏览器。 Webkit使用操作系统中的本机下拉元素，而不是自己实现下拉列表，不幸的是，本地下拉列表不支持点击事件。出于同样的原因，他们也不支持CSS选项元素或其他整洁的技巧。

唯一能够让这些工作的跨浏览器的方式是使用<ul>以及大量的javascript来实现这个功能。

在Safari中未触发JQuery Click事件？

相关推荐