在Safari浏览器中，JQuery的点击事件没有被触发？

Question

在Safari浏览器中，JQuery的点击事件没有被触发？

javascriptjqueryselectsafarijquery-events

3

我想在用户从下拉框中选择选项时执行某个操作-这应该是非常简单的，对吧？我正在使用JQuery 1.3.1为下拉框的id注册一个点击处理程序。一切都很好，直到我使用Chrome和Safari进行测试，并发现它不起作用。

Firefox 3.05 - 是
I.E 7.0.5730.13 - 是
IE6Eolas - 是
Sarafi 3.2.1 - 否
Chrome 1.0.154.43 - 否

请参见下面的代码：

<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>

有人知道我应该做什么才能使它生效吗？警报最终会被触发，但只有在双击选择框后才会触发。

- Tom

2个回答

1

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

唯一跨浏览器的方法是手动使用<ul>和大量的JavaScript来实现此功能。

- Wichert Akkerman

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tom · Accepted Answer

我找到了问题。对于选择框，您需要注册“更改”事件的处理程序，而不是“单击”事件。奇怪的是Firefox和IE可以使用单击事件。

总之，以下代码适用于所有浏览器：

<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>