2

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

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

4 回答 4

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.

于 2013-02-21T07:17:41.457 回答
2

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

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

我用你的代码设置了一个jsfiddle，很好。只需在您的听众周围放一个 document.ready，您就会很开心。

于 2013-02-21T07:31:54.403 回答
0

您必须了解有关 javascript 的一些基本知识。通常，javascript 引擎仅在页面加载时找到 dom 元素并将相应的事件处理程序附加到那些元素上。如果您稍后添加任何 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);
    }
});

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

于 2013-02-21T07:39:36.137 回答
0

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

$(function(){
  //events go here
});
于 2013-02-21T07:27:37.333 回答