Question

On a page there are couple of Add buttons (li .plus).

When you click on a Add button and assume json.success is false, it will then popup via $.colorbox plugin

The popup pull the data from href:"/Handle/Postcode/?val" + Val

There is a submit button (#submitButton) from the popup, when I click on the submit button, it keep popup alert box a few times, I dont understand why that happen? how to fix it?

$("li .plus").click(function(event) {
    event.preventDefault();

    var Val;
    Val = $('#id').val()

        $.getJSON(Address +"/Handle/Add", {
            Val:Val
        }, function(json) {
            if (json.success == "false" && json.error == "NoArea") {
                $.colorbox({
                    width:"450px",
                    transition:"none",
                    opacity:"0.4",
                    href:"/Handle/Postcode/?val" + Val
                });
                $("#submitButton").live('click', function() {
                   var PostCodeArea = $("#deliveryAreaPostcode").val();
                    alert(PostCodeArea);
                    //Why does it popup a few times?
                });

            }

            if (json.success == "true") {
                Backet();
            }
        });
});

Answer 1

Thats an easy one, because you are using the .live() function to bind your click handler. If that code gets executed more than one time your binding happens more than one time.

You can either try to track the state of the binding and only apply it if it doesn’t exist, or you can call your click function in the html with the onClick attr.

Edit: Just to clarify I meant something along the lines of –

HTML

 <button id='submitButton' onclick="displayAreaCode();">Submit</button>

JS

function displayAreaCode(){
    var PostCodeArea = $("#deliveryAreaPostcode").val();
    alert(PostCodeArea);
}