Question

在jQuery完成初学者，我假设答案很简单，所以我道歉。

我有一个这样的登录表单：

<table id="login_form">
    <tr>
        <td class="login_label">Username: </td>
        <td><input type="text" class="login_input" /></td>
    </tr>
    <tr>
        <td class="login_label">Password: </td>
        <td><input type="password" class="login_input" /></td>
    </tr>
</table>

和jQuery代码：

$(".login_input")
    .focus(function(){
        alert("Why do I never get this alert?");
    }
);

为什么当我点击两个文本输入字段中的任何一个时，警报不会显示？如果我将“焦点”改为“准备好”，那么我就会收到警报，所以我假设它与之相关。

Answer 1

您需要输入document.ready，以便在将元素添加到DOM并准备好DOM时执行绑定代码。准备工作在代码中等待在DOM中添加元素。

<强> Live Demo

$(document).read(function(){
   $(".login_input").focus(function(){
        alert("Why do I never get this alert?");
    });
});

传递给.ready（）的处理程序保证在执行之后执行 DOM准备好了，所以这通常是附加所有其他内容的最佳位置事件处理程序并运行其他jQuery代码。使用依赖的脚本时关于CSS样式属性的值，重要的是引用外部样式表或嵌入样式元素之前引用脚本，reference。

Answer 2

演示 http://jsfiddle.net/vNCs2/

API：

http://api.jquery.com/ready/

当JavaScript提供用于执行代码的load事件时页面呈现，此事件在所有资产之前都不会被触发如图像已被完全接收。在大多数情况下，只要DOM层次结构完全可以运行脚本建造。传递给.ready（）的处理程序是保证的在DOM准备好之后执行，所以这通常是最好的地方附加所有其他事件处理程序并运行其他jQuery代码。使用时依赖于CSS样式属性值的脚本，这很重要以前引用外部样式表或嵌入样式元素引用脚本。

<强>代码

$(function () {
$(".login_input").focus(function(){
        alert("now you do?");
    }
);
});

Answer 3

将代码包装在$(document).read(function(){<code here>});中，这将在文档准备好后运行代码：

$(document).read(function(){
   $(".login_input").focus(function(){
        alert("Why do I never get this alert?");
   });
});

演示：

http://jsfiddle.net/2DS3g/

Answer 4

警报未显示的原因是缺少包装器$(document).ready(function() {...});

添加它会产生另一个问题，即无限循环的警报：

您选择其中一个字段
该领域获得焦点
焦点事件如果被解雇
警告显示
单击“确定”或“ESC”
警报已关闭
字段重点关注
焦点事件再次被触发......

为什么在Infinite loop of jQuery focus() event with a element中描述了这一点。您可以尝试使用$(this).blur();：

$(document).ready(function() {
    $(".login_input").focus(function() {
        $(this).blur();
        alert("Here is my alert!");
    });
});

但问题几乎是一样的。

在某些实际应用程序中，您很可能不会调用alert（）。例如，将alert()更改为console.log可解决问题：

$(document).ready(function() {
    $(".login_input").focus(function() {
        console.log("field in focus");
    });
});

单击文本输入时如何执行某些操作？

4 个答案: