我正在尝试在文本字段被聚焦,模糊以及按下某个键时调用某些函数;但是,只有焦点功能才有效。这就是我所拥有的:
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);
}
});
就像我说的那样,重点是按预期工作,但我甚至无法从其他人那里得到警报。知道问题是什么吗?
答案 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);
}
});
注意:此代码未经过测试。如果有任何语法错误,请原谅。