Question

I’ve written the following jQuery script, and I’m trying to make a ‘cool transition’, lol. When you start typing in #post-area-input input type=text-box, the page should switch to the ‘compose.php’ page (a form), while you type, and if you type over 19 characters, the textbox should expand to 80% width on keyup, if it’s less than 30 characters, the box reverts to 300px.

Though, the problem is, if you blur out of the #post-area-input textbox, and then focus again, the load function reloads, and the other (possibly inputted) data in the compose.php file will be gone.

The question is: How do I make it so I prevent the last function from occurring again once it’s already occurred? I’ve looked at .unbind(), but seeing as though there’s another function being simultaneously on the same ID, that would disable the expanding function as well.

Thanks a lot! Very grateful for any answers 🙂 (The script is below)

$('#post-area-input').keyup(function(){
    if($('#post-area-input').val().length > 19){
        $('#post-area-input').animate({width: '80%',}, 80, function(){});
    }
    else {
        $('#post-area-input').animate({width: '300',}, 80, function(){});
    }
});

$('#post-area-input').blur(function(){
    if($('#post-area-input').val().length < 19){
        $('#post-area-input').animate({width: '300',}, 80, function(){});
    }
});

$('#post-area-input').keyup(function(){
    $('#pcontent').load('compose.php').hide().fadeIn('slow');
});

Answer 1

I’d recommend against binding multiple anonymous functions to an event handler. Unbinding them can get ambiguous. Instead, declare the functions and bind/unbind them as such:

function keyUpFuncA(e) {
  //code
}
function keyUpFuncB(e) {
  //code
}
$(document).keyup(keyUpFuncA);
$(document).keyup(keyUpFuncB);

//then later when unbinding:
$(document).unbind("keyup", keyUpFuncA);

What may be tempting, but what you do not want to do, is resort to a global variable to track when load.php has been loaded.