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

时间:2013-02-21 07:10:56

标签: javascript jquery keypress blur keydown

我正在尝试在文本字段被聚焦,模糊以及按下某个键时调用某些函数;但是,只有焦点功能才有效。这就是我所拥有的:

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);
    }
});

就像我说的那样,重点是按预期工作,但我甚至无法从其他人那里得到警报。知道问题是什么吗?

4 个答案:

答案 0 :(得分:6)

您需要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.

答案 1 :(得分:2)

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

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

我使用您的代码设置jsfiddle,没关系。只需要在你的听众身边放一份文件,你就会变得很好。

答案 2 :(得分:0)

这可能是在元素加载到DOM之前尝试绑定事件。尝试将整个事情包装在:

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

答案 3 :(得分:0)

你必须了解一些关于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);
    }
});

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