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

注意：此代碼未經過測試。 如果有任何語法錯誤，請原諒。