Question

我有一个JQuery代码，当输入或选择元素获得焦点时，它会执行某些操作。虽然我的输入元素代码有效，但是select元素不起作用。

这就是我的工作。

<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">


$(document).ready(function(){
   $(":input").focus(function () { //this works
    //do something
   });

   $(":select").focus(function () { //this doesn't
    //do something      
   });
});

</script>
</body>

我在select上尝试了一些变体，例如使用$（“select”）代替$（“：select”），但也没用。

我是JQuery的初学者。

如果你能告诉我如何让它发挥作用，我感激不尽。

非常感谢！

Answer 1

简短而简单：因为:select不存在。

$('select') will work，但前提是您的代码中有<select>元素。你没有上面的代码。

查看list of selectors。

:input instead does exist：

选择所有输入，textarea，select和button元素。

通常：以冒号:开头的选择器是伪选择器。它们由jQuery定义（它们不是有效的CSS选择器）并且选择具有特定状态或属性的元素。）

您已遇到:input。它选择所有表单控件元素。另一个是例如: visible，它选择所有显示的（可见）元素。

<强>更新

执行<select>时，$('select').focus(...元素必须存在。我不知道您使用的软件，但是如果他们加载了这些元素，例如通过Ajax，很可能它们在你的代码执行时还不存在。

确保页面上有<select>个元素。

您可能必须使用.live()：

$('select').live('focus', function() {
    //stuff
});

Answer 2

没有：选择选择器，但由于“select”是HTML中自己的标记，因此您可以使用$（'select'）（例如，您可以使用$（'body'））。更好的方法可能是为“select”元素分配一个“id”，然后使用$（'＃id'）直接选择该元素。

Answer 3

$（“：select”）不是有效的选择器。 http://api.jquery.com/category/selectors/

Answer 4

你应该避免使用：输入：单独选择。如果你的DOM中有很多元素，这是一个性能杀手。：输入意味着jQuery必须搜索DOM中的每个元素才能找到输入。以下选择器分配更快，更有效。

$（ '＃myForm的'）。发现（ '输入'）

检查性能测试（快75％）http://jsperf.com/input-selector-performance0

所以你基本上可以做到

$('#myform').delegate('select','focus', function() {
   // what ever you want to do here
});

为什么$（“：select”）。焦点不起作用而$（“：input”）。焦点有效吗？

4 个答案: