Untie one of two jQuery functions with the same trigger?

Question

I wrote the following jQuery script, and I'm trying to make a "cool transition", lol. When you start typing # input-type input = text-box, the page should switch to the 'compose.php' (form) page when you type, and if you enter more than 19 characters, the text field should expand to 80% of the width when key press, if it is less than 30 characters, the field is returned up to 300 pixels.

Although the problem is that if you blur the input text field # of the post-area and then focus again, the download function reloads and the other (possibly entered) data in the compose.php file disappears.

The question arises: how to do this to prevent the last function from repeating after its occurrence? I looked at .unbind (), but, seeing that there is another function located simultaneously on the same ID, this also disables the extension function.

Thanks a lot! Very grateful for any answers :) (script 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 would recommend not associating several anonymous functions with an event handler. Unpinning them can be mixed. Instead, declare functions and bind / untie 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); 

Which may be tempting, but what you don't want to do is resorting to a global variable to track load.php loading.

Answer 2

You should call your keyup functions:

 $('#post-area-input').bind("keyup.firstnameoffunction", function() { /* .. */ }); $('#post-area-input').bind("keyup.secondnameoffunction", function() { /* .. */ }); $('#post-area-input').unbind("keyup.firstnameoffunction"); 

you can also check what is currently bound to the object with this:

 $('#post-area-input').data("events"); 

Answer 3

I am a little foggy in what is actually happening, so please forgive me if I am stupid, but one way to achieve the “denial” of the event could be to use the bool flag. For instance:

 var run_load_function = true; ... $('#post-area-input').blur(function(){ run_load_function = false; ... }); ... $('#post-area-input').keyup(function(){ if (run_load_function) $('#pcontent').load('compose.php').hide().fadeIn('slow'); }); 

Then you also have the option to reset bool whenever you need it, providing some fine grain control. Good question, and I look forward to other answers! Hope this helps! :)