mui.prompt执行多次的奇葩问题

业务描述:
简单的html页面, 页面上有一个"预约"按钮, 其他部分为广告信息.

期待结果:点击预约按钮, 弹出预约金额对话框, 输入金额,点击确定, 提交ajax请求.

实际结果:点击预约按钮, 在对话框中数据金额, 点击确定按钮, 提交ajax请求两次!!!两次!!!

代码如下:

$(document).ready(function(){  
        $("button#bookProduct").unbind();  
        $("button#bookProduct").bind("click", function() {  
            mui.prompt(  
                "请输入预约信息：\n产品名称："+$("input[name=productname]").val(),  
                "预约金额（单位：元）",  
                "预约信息",["取消","确定"],function(e) {  
                    if (e.index == 1) {  
                        if(e.value==''){  
                            mui.alert("金额必须为数字");  
                            return false;  
                        }else{  
                            $.post("/wap/productInfo/bookProduct",  
                            {  
                                account: e.value,  
                                nickname:$("input[name=nickname]").val(),  
                                productName:$("input[name=productname]").val(),  
                                managerOpenId : $("input[name=managerOpenId]").val(),  
                                openId:$("input[name=openId]").val()  
                            });   
                            mui.alert("预约信息已发送至客户经理。","预约成功",function(){  
                                WeixinJSBridge.call('closeWindow',5000);  
                            });  
                        }  
                    } else {  

                    }  
                });  
            document.querySelector('.mui-popup-input input').type='number';  
        });  
    });

最后经查证, 本页面中引入前后引入两次:<script src="xxxxx/Mui/js/mui.min.js"></script>

分享一下教训:
出现页面中点击按钮出现多次提交的情况一般有以下两种原因:

1. 像我本次犯得错误一样, 多次引入相同的js库文件.(这种情况执行次数一般是固定的)
2. 在页面加载事件(load或ready)中使用了bind事件并且在此之前没有解绑定(unbind).(这种情况执行次数会每刷新一次页面增加一次)

希望大家引以为戒, 避免跳坑.