javascript - .blur() 和 .keypress() 在 jQuery 中不起作用

Question

我试图在文本字段聚焦、模糊以及按下按键时调用一些函数；但是，只有对焦功能有效。这是我所拥有的:

HTML:

<form id="loginForm" method="post" action="login.php" style="float: right; width: 90%; margin: 0 -1px 5px 0;">
    <input type="text" id="loginPass" value="password" /><input type="text" id="loginName" value="email" />
    <input type="submit" id="loginSubmit" value="Log In" />
</form>

JS:

$('#loginPass').keypress(function() {
    alert('hey');
});
$('#loginPass').blur(function() {
    var lp = $('#loginPass');
    alert('val:'+lp.val());
});
$('#loginPass').focus(function() {
    var lp = $('#loginPass');
    if ( lp.val() == 'password' ) {
        $('#loginForm').html('\n        <input type="password" id="loginPass" value="" />' +
            '<input type="text" id="loginName" value="email" />' +
            '<input type="submit" id="loginSubmit" value="Log In" />');
        //setTimeout(function() { lp.focus(); }, 10);
        setCaretPos(document.getElementById("loginPass"), 0);
    }
});

就像我说的，焦点一个按预期工作，但我什至无法从其他焦点中得到警报。知道问题出在哪里吗？

Answer 1

您需要事件委托(delegate):

$('#loginForm').on('keypress', '#loginPass', function() {
   alert('hey');
});
$('#loginForm').on('blur', '#loginPass', function() {
  var lp = $('#loginPass');
  alert('val:'+lp.val());
});

即使焦点也应该必须获得委托(delegate):

$('#loginForm').on('focus', '#loginPass', function() {
var lp = $('#loginPass');
if ( lp.val() == 'password' ) {
    $('#loginForm').html('\n        <input type="password" id="loginPass" value="" />' +
        '<input type="text" id="loginName" value="email" />' +
        '<input type="submit" id="loginSubmit" value="Log In" />');
    //setTimeout(function() { lp.focus(); }, 10);
    setCaretPos(document.getElementById("loginPass"), 0);
}
});

因为每次您聚焦输入时，它都会用新的 html 标记替换当前的 html 标记。