jQuery .live() causing parallel loop

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开发者_StackOverflow中文版. 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.

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.

jQuery .live was removed on 1.9. Here's the correct way to do it:

The .live() method has been deprecated since jQuery 1.7 and has been removed in 1.9. We recommend upgrading code to use the .on() method instead. To exactly match $("a.foo").live("click", fn), for example, you can write $(document).on("click", "a.foo", fn). For more information, see the .on() documentation. In the meantime, the jQuery Migrate plugin can be used to restore the .live() functionality.

Via http://jquery.com/upgrade-guide/1.9/#live-removed