为什么这个自定义jQuery提示每次第n次重复其回调操作n次?

时间:2013-01-10 21:26:39

标签: javascript jquery html

<html>
    <div id="pnl_prompt" style="display:none; background-color:#808080">
        <b id="lbl_prompt_title">Prompt</b> <br />
        <span id="lbl_prompt_name" class="right">Field:</span>  <input id="txt_prompt_field" type="text"/>  <hr />
        <input id="btn_prompt_ok" type="button" value="OK"/>
        <input id="btn_prompt_cancel" type="button" value="Cancel"/>
        <script type="text/javascript">
            function myPrompt(title, name, isPassword, callback){
                $("#btn_prompt_ok").click(function(){
                    $("#pnl_prompt").css("display","none");
                    ENTERED_VALUE = $("#txt_prompt_field").val();
                    if(callback)    callback();
                });
                $("#btn_prompt_cancel").click(function(){
                    $("#pnl_prompt").css("display","none");
                    ENTERED_VALUE = null;
                    $("#txt_prompt_field").val("");
                });

                ENTERED_VALUE = null;
                $("#lbl_prompt_title").html(title);
                $("#lbl_prompt_name").html(name+":");
                if(isPassword)  $("#txt_prompt_field").prop("type", "password");
                $("#pnl_prompt").css("display","block").css({position:"absolute",left:"100px",top:"100px"});
                $("#txt_prompt_field").val("").focus();
            }
        </script>
    </div>
</html>

上面的div使用“确定”和“取消”按钮布局文本字段。 myPrompt函数使div出现,并声明OK / Cancel按钮操作。确定将文本输入值存储到window.ENTERED_VALUE,然后隐藏div。考虑以下测试javascript调用:

javascript:myPrompt(“Hello”,“World”,false,function(){alert(ENTERED_VALUE);});

在用户通过“确定”按钮提交其值后,应该提醒输入的值。它会这样做,但如果再次运行该呼叫,则会有2个警报。再次带来3个警报,等等。这是怎么回事?

1 个答案:

答案 0 :(得分:5)

嗯......每次用这些行调用myPrompt时,你都会分配一个新的点击处理程序:

function myPrompt(title, name, isPassword, callback){
        $("#btn_prompt_ok").click(function(){ // new callback for clicking!
            $("#pnl_prompt").css("display","none");
            ENTERED_VALUE = $("#txt_prompt_field").val();
            if(callback)    callback();
        });

        $("#btn_prompt_cancel").click(function(){ // new callback for clicking!
            ...