jQuery .live() causing parallel loop

Question

Let's get down to it; Click an AJAX-inserted LI element, popup a dialog box with a text input, when the input is above 100, submit the information for verification against the server. Here's what it looks like:

$("li").live("click", function() { 
    $("#dialog1").dialog('open');
    $("#pin").focus();
    $("#pin").keyup(function() {
        var trigger = $("#pin").val;            
        if (trigger > 100) { // Submit for verification, otherwise do nothing }
        }
    });

The issue that I'm running into is that it will function normally the first time. When an LI element is clicked again, the keyup function is running twice. If it is clicked again, it runs three times. Here's what the console dump looks like:

First Click: 1 10 100

Second Click: 1 1 10 10 100 100

Third: 1 1 1 10 10 10 100 100 100

Any thoughts would be really appreciated. If I'm injecting my AJAX incorrectly, please let me know.

Answer 1

I think your issue is you keep adding an event handler to the #pin element. So the first time only a single handler is attached. The second time two handler and so on.

Move you $("#pin").keyup outside of the click handler.