.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.

Answer 2

您的代码很好，它是委派事件的简写，这里是.keypress的缩写。问题是它们没有被调用，所以侦听器被委派了。

$(document).ready(function(){
    $('#loginPass').keypress(function() {
        alert('hey');
    });
    $('#loginPass').blur(function() {
        var lp = $('#loginPass');
        //alert('val:'+lp.val());
    });
});

我用你的代码设置了一个jsfiddle，它很好。只要在听众周围放一张唱片，你就会获得金牌。

Answer 3

这可能是在元素加载到DOM之前尝试绑定事件。试着用包装整个东西

$(function(){
  //events go here
});

Answer 4

您必须了解javascript的一些基本知识。通常，javascript引擎只在页面加载时查找dom元素并将相应的事件hadler附加到这些元素。若以后添加任何dom元素（读取javascript后或页面加载后），javascript引擎将不会针对那些动态添加的dom执行脚本。为了避免您不得不强制javascript引擎再次读取您的脚本。

function shouldApplyDynamicDOM(){
$('#loginPass').keypress(function() {
    alert('hey');
});
$('#loginPass').blur(function() {
    var lp = $('#loginPass');
    alert('val:'+lp.val());
});
}
shouldApplyDynamicDOM();//Attach event handler on page load.
$('#loginPass').focus(function() {
    var lp = $('#loginPass');
    if ( lp.val() == 'password' ) {
       //These DOM will be added dynamically. 
        $('#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);
        shouldApplyDynamicDOM(); //Here Forcing to add event handler for dynamic added DOM
        setCaretPos(document.getElementById("loginPass"), 0);
    }
});

注意：此代码未经过测试。如果有任何语法错误，请原谅。