jquery live automatically incrementing keyup event

Question

I'm really confused, and not even sure what to search for to find answers. I'm getting multiple calls to a javascript function. I'ts not making sense to me.

Here's what the code does.

$('expenses_txt').live(\'keyup\', function() {
    $(this).typeWatch({ highlight: true, wait: 500, captureLength: 0, callback: calculate_expenses });
});

The "Calculate_expenses" is a javascript function that uses jquery ajax to call a php page that returns data that gets displayed in a span.

I'm using firebug to help me debug and in the Calculate_expenses function I put a "console.log" to debug when this function is being called.

Here's whats going on. I only have 1 input box in the DOM at the time this happens, when I press only one key, the output in the console puts out one debug msg like it should, when I press a key again in the same input box the output in the console is doubled (ie, the Calculate_expenses function got called twice but should have only been called once), when I press a key again (for a total of 3 key presses) the output in the console puts out 3 calls to the Calculate_expenses function now.....and so forth. I don't really know what's going on here. The code appears to me that it would only call the Calculate_expenses function 1 time, but when using firebug it actually is being called over and over when I don't want it to be.

Any ideas? Is it the way I'm using .live() If I just use the "keyup" event it works fine, problem is I need to use typeWatch plugin to delay the ajax call until after the typing is finished and the keyup event triggers too soon. The reason I'm using live() is because I dynamically add elements to the dom and this is the only way I could figure out how to use both typeWatch and dynamically add elements to the dom that needed to be summed up...

your thoughts are appreciated. thanks.

Answer 1

Where is the $('expenses_txt').live() chunk placed? It sounds like it's being triggered multiple times.

Set a breakpoint (firebug script tab, click in the left margin around the line numbers) on the $('expenses_txt').live() line. It should only trigger once. If it triggers multiple times, you'll conveniently see a stack trace (which should lead you back to culprit).

Also, set a breakpoint inside the closure (where you use typeWatch). The typeWatch portion might be the culprit as it's re-instantiating itself on every keyup (regardless of whether this has already been "treated" (and binding the callback multiple times).

If it's typeWatch at work, you'll want to check if it's bound somehow. The simplest thing would be to flag the DOM element somehow. You could, for example use:

jQuery('#element').data('hasTypeWatch',true) 

to set the flag initially. Check for it using:

jQuery('#element').data('hasTypeWatch')

Check the plugin docs to see it the author has accounted for this somehow.

Answer 2

Here's a mockup:

function handleData(data){
    console.log(data);
    $("#results").append("<p>"+ data +"</p>");
}

$(function(){
    $("#inputElm").focus();
    $("#inputElm").live('keyup', function(){
        $(this).typeWatch({
            callback: handleData,
            wait: 500,
            captureLength: 0
        });
    });
});

Note the console logs several calls to the typeWatch method on each keyup, as per the comment by koobz. I think you want to omit the $.live() handler and simply attach typeWatch to your input.

Answer 3

Well, I'm still really confused. Koobz, thanks for the firebug tip. I found out where I could see the script, however the breakpoints don't appear to be working, or stopping the code, it stops the code just fine in my .js file that is loaded with the main app, but the script that is dynamically added when the particular page loads doesn't seem to recognize the breakpoints and stop at them so I can't step through the code.

I noticed something weird, but it might just be me as the weirdo, but the jquery functions show up without the $(). For example: the jquery code in my source code is is written like:

$('income_txt').live('keyup', function() { $(this).typeWatch({ highlight: true, wait: 500, captureLength: -1, callback: calculate_income }); });

but when looking at the firebug script tab it looks like this:

function () { $(this).typeWatch({highlight: true, wait: 500, captureLength: -1, callback: calculate_income}); }

Is this what jquery is suppossed to do? I'm assuming that it's being tied to the "selector" and thus doesn't need to show the selector in front of it, rather it just uses "function()"...is that correct?

Any other ideas on the .live() stuff, or a different work around to use typeWatch, no matter what I try it still calls the function multiple times, unless I remove the .live(). If I don't use .live() the typewatch works on keyup event, but new elements added to the dom dynamically using .clone(true) don't work on that object and typeWatch doesn't fire. I don't know how to bind the newly created objects to the event that uses typewatch, other than using .live(), which causes other problems. If I forget using typeWatch and tie my keyup event to the selector it works, but the main problem doing it this way, is it calls the ajax too fast and causes problems on every keystroke.

Are there other ways to accomplish what I'm trying to do? Thanks for your help.

Answer 4

well, nothing with live and typewatch worked...work around was to use onblur and let the .clone() copy it over.