.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

你需要event delegation:

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

甚至focus还应该has to get the delegation:

$('#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);
}
});

because every time you focus the input it replaces the current html markup with the new one.