CODEWITHSUNDEEP
javascriptjquerykeypressblurkeydown
SISYN
SISYN

Reputation: 2269

.blur() and .keypress() not working in jQuery

I am trying to call some functions when a text-field is focused, blurred, and when a key is pressed; however, only the focus function works. Here's what I have:

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

Like I said, the focus one works as expected, but I can't even get an alert out of the other ones. Any idea what the problem is?

Upvotes: 2

Views: 7729

Answers (4)

HILARUDEEN S ALLAUDEEN
HILARUDEEN S ALLAUDEEN

Reputation: 1752

You have to understand some basic thing about javascript. Generally javascript engine finds dom element and attach respective event hadler to those when page is loading only. If you add any dom element later(After javascript is read or after page load), javascript engine won't execute script against those dynamically added dom. To avoid you have to force javascript engine to read your script again.

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

Note: This code is not tested. If any syntax error excuse me.

Upvotes: 0

Jai
Jai

Reputation: 74738

you need event delegation:

$('#loginForm').on('keypress', '#loginPass', function() {
   alert('hey');
});
$('#loginForm').on('blur', '#loginPass', function() {
  var lp = $('#loginPass');
  alert('val:'+lp.val());
});

even focus should also 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.

Upvotes: 6

Just Aguy
Just Aguy

Reputation: 327

Your code is fine, it's shorthand for delegating events, here is the one for .keypress. The problem is they weren't being called so the listeners were delegated.

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

I setup a jsfiddle with your code, it's fine. Just throw a document.ready around your listeners and you'll be golden.

Upvotes: 2

David Gilbertson
David Gilbertson

Reputation: 4863

This might be trying to bind the events before the elements are loaded into the DOM. Try wrapping the whole thing in:

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

Upvotes: 0

Related Questions