javascript - 为什么在点击事件后要弹出几次警告？

Question

页面上有几个“添加”按钮 (li .plus)。

当您单击“添加”按钮并假设 json.success 为 false 时，它​​将通过 $.colorbox 插件弹出

弹出窗口从 href:"/Handle/Postcode/?val"+ Val

中提取数据

弹出窗口中有一个提交按钮(#submitButton)，当我单击提交按钮时，它会多次弹出警告框，我不明白为什么会发生这种情况？如何解决？

$("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

这很简单，因为您正在使用 .live() 函数来绑定(bind)您的点击处理程序。如果该代码执行多次，则您的绑定(bind)会发生多次。

您可以尝试跟踪绑定(bind)的状态，并且仅在绑定(bind)不存在时应用它，或者您可以使用 onClick attr 在 html 中调用 click 函数。

编辑:只是为了澄清我的意思是 -

HTML

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

JS

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