JQuery Click事件未在Safari中触发?

问题描述 投票:3回答:2

当用户从选择框中选择一个选项时,我正在尝试做某事-可以这么简单吗?我正在使用JQuery 1.3.1注册带有选择框ID的点击处理程序。一切正常,直到我使用Chrome和Safari进行测试后发现它无法正常工作。

  1. Firefox 3.05-是
  2. IE 7.0.5730.13-是
  3. IE6Eolas-是
  4. Sarafi 3.2.1-否
  5. 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>

任何人都知道我应该为此做些什么?警报最终不会触发,但只有在双击选择框后才可以触发?

javascript jquery select safari jquery-events
2个回答
5
投票

我发现了我的问题。对于“选择”框,您需要为“更改”事件而不是“单击”事件注册处理程序。 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>

1
投票

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

使这些功能正常工作的唯一跨浏览器方法是使用

    和很多javascript手动实现此功能。
© www.soinside.com 2019 - 2024. All rights reserved.