jquery 自定义插件的一个调用的小问题

Question

我自己写了一个插件，（初次写，写的不好）代码如下
我调用的方法是这样的：
                $('#beginTime').date();
                $('#endTime').date();
就是我页面上有个开始时间文本框，和结束时间文本框。在文本框被点击（既文本框获取焦点的时候，日期插件弹出来，可以选择日期。）在选择完日期点击日期插件上的确定按钮后，beginTime文本框的日期值变了，但是endTime文本框的日期值也变了。
我尝试在插件里加入这句alert("被执行次数");被执行了两个，我感觉是 $('#beginTime').date();
                $('#endTime').date();这两个调用同时被执行了。
我不知道我说的对么，只求帮忙解决这个问题。define(["jquery","lib/iscroll"],function ($,iEx) {
(function ($) {      
    $.fn.date = function (options) {   
        //插件默认选项
         //alert("被执行次数");
        var that = $(this);
        var indexY=1,indexM=1,indexD=1;
        var yearScroll=null,monthScroll=null,dayScroll=null;
        $.fn.date.defaultOptions = {
            beginyear:1999,                 //日期--年--份开始
            endyear:2020,                   //日期--年--份结束
            beginmonth:"1",                 //日期--月--份结束
            endmonth:"12",                  //日期--月--份结束
            beginday:"1",                   //日期--日--份结束
            endday:"30",                    //日期--日--份结束
            curdate:true,                   //打开日期是否定位到当前日期（暂时未写）
            theme:null,                     //控件样式（暂时未写）
            mode:null,                      //操作模式（暂时未写）
            event:"click"                   //打开日期插件默认方式为点击后后弹出日期 
        }
        //用户选项覆盖插件默认选项   
        var opts = $.extend( true, {}, $.fn.date.defaultOptions, options );
        //绑定事件（默认事件为获取焦点）
        that.bind(opts.event,function () {
            createUL();      //动态生成控件显示的日期
            init_iScrll();   //初始化iscrll
            extendOptions(); //显示控件
            that.blur();
            yearScroll.refresh();
            monthScroll.refresh();
            dayScroll.refresh();
        })  
        $("#dateconfirm").click(function () {
            var datestr = $("#yearwrapper ul li:eq("+indexY+")").html()+"-"+
                          $("#monthwrapper ul li:eq("+indexM+")").html()+"-"+
                          $("#daywrapper ul li:eq("+indexD+")").html()
                that.val(datestr);
                $("#datePage").hide(); 
                $("#dateshadow").hide();
                return this;
        });
        $("#datecancle").click(function () {
           $("#datePage").hide(); 
           $("#dateshadow").hide();
        });
 
        function extendOptions(){
            $("#datePage").show(); 
            $("#dateshadow").show();
        }
        function init_iScrll() { 
              yearScroll = new iScroll("yearwrapper",{snap:"li",vScrollbar:false,
                  onScrollEnd:function () {
                       indexY = (this.y/40)*(-1)+1;
                  }});
              monthScroll = new iScroll("monthwrapper",{snap:"li",vScrollbar:false,
                  onScrollEnd:function (){
                      indexM = (this.y/40)*(-1)+1;
                  }});
              dayScroll = new iScroll("daywrapper",{snap:"li",vScrollbar:false,
                  onScrollEnd:function () {
                      indexD = (this.y/40)*(-1)+1;
                  }});
        }
        function  createUL(){
            $("#yearwrapper ul").html(createYEAR_UL());
            $("#monthwrapper ul").html(createMONTH_UL());
            $("#daywrapper ul").html(createDAY_UL());
        }
        
        //创建 --年-- 列表
        function createYEAR_UL(){
            var str="<li>&nbsp;</li>";
            for(var i=opts.beginyear; i<=opts.endyear;i++){
                str+='<li>'+i+'</li>'
            }
            return str+"<li>&nbsp;</li>";;
        }
        //创建 --月-- 列表
        function createMONTH_UL(){
            var str="<li>&nbsp;</li>";
            for(var i=opts.beginmonth;i<=opts.endmonth;i++){
                str+='<li>'+i+'</li>'
            }
            return str+"<li>&nbsp;</li>";;
        }
        //创建 --日-- 列表
        function createDAY_UL(){
            var str="<li>&nbsp;</li>";
                for(var i=opts.beginday;i<=opts.endday;i++){
                str+='<li>'+i+'</li>'
            }
            return str+"<li>&nbsp;</li>";;
        }
    }
})(jQuery);  
});jqueyr插件

Answer 1

(function($) {
                $.fn.date = function(options) {
                    //插件默认选项
                    //alert("被执行次数");
                    var that = $(this);
                    var indexY = 1, indexM = 1, indexD = 1;
                    var yearScroll = null, monthScroll = null, dayScroll = null;
                    $.fn.date.defaultOptions = {
                        beginyear: 1999,                 //日期--年--份开始
                        endyear: 2020,                   //日期--年--份结束
                        beginmonth: "1",                 //日期--月--份结束
                        endmonth: "12",                  //日期--月--份结束
                        beginday: "1",                   //日期--日--份结束
                        endday: "30",                    //日期--日--份结束
                        curdate: true,                   //打开日期是否定位到当前日期（暂时未写）
                        theme: null,                     //控件样式（暂时未写）
                        mode: null,                      //操作模式（暂时未写）
                        event: "click"                   //打开日期插件默认方式为点击后后弹出日期 
                    }
                    //用户选项覆盖插件默认选项   
                    var opts = $.extend(true, {}, $.fn.date.defaultOptions, options);
                    //绑定事件（默认事件为获取焦点）
                    that.bind(opts.event, function() {
                        createUL();      //动态生成控件显示的日期
                        init_iScrll();   //初始化iscrll
                        extendOptions(); //显示控件
                        that.blur();
                        yearScroll.refresh();
                        monthScroll.refresh();
                        dayScroll.refresh();
                        that = $(this);
                    })
                    $("#dateconfirm").unbind("click").click(function() {
                        var datestr = $("#yearwrapper ul li:eq(" + indexY + ")").html() + "-" +
                          $("#monthwrapper ul li:eq(" + indexM + ")").html() + "-" +
                          $("#daywrapper ul li:eq(" + indexD + ")").html()
                        that.val(datestr);
                        $("#datePage").hide();
                        $("#dateshadow").hide();
                        return this;
                    });
                    $("#datecancle").click(function() {
                        $("#datePage").hide();
                        $("#dateshadow").hide();
                    });                    function extendOptions() {
                        $("#datePage").show();
                        $("#dateshadow").show();
                    }
                    function init_iScrll() {
                        yearScroll = new iScroll("yearwrapper", { snap: "li", vScrollbar: false,
                            onScrollEnd: function() {
                                indexY = (this.y / 40) * (-1) + 1;
                            }
                        });
                        monthScroll = new iScroll("monthwrapper", { snap: "li", vScrollbar: false,
                            onScrollEnd: function() {
                                indexM = (this.y / 40) * (-1) + 1;
                            }
                        });
                        dayScroll = new iScroll("daywrapper", { snap: "li", vScrollbar: false,
                            onScrollEnd: function() {
                                indexD = (this.y / 40) * (-1) + 1;
                            }
                        });
                    }
                    function createUL() {
                        $("#yearwrapper ul").html(createYEAR_UL());
                        $("#monthwrapper ul").html(createMONTH_UL());
                        $("#daywrapper ul").html(createDAY_UL());
                    }                    //创建 --年-- 列表
                    function createYEAR_UL() {
                        var str = "<li> </li>";
                        for (var i = opts.beginyear; i <= opts.endyear; i++) {
                            str += '<li>' + i + '</li>'
                        }
                        return str + "<li> </li>"; ;
                    }
                    //创建 --月-- 列表
                    function createMONTH_UL() {
                        var str = "<li> </li>";
                        for (var i = opts.beginmonth; i <= opts.endmonth; i++) {
                            str += '<li>' + i + '</li>'
                        }
                        return str + "<li> </li>"; ;
                    }
                    //创建 --日-- 列表
                    function createDAY_UL() {
                        var str = "<li> </li>";
                        for (var i = opts.beginday; i <= opts.endday; i++) {
                            str += '<li>' + i + '</li>'
                        }
                        return str + "<li> </li>"; ;
                    }
                }
            })(jQuery);试试看行不，原因是你为$("#dateconfirm")多次绑定了click事件

Answer 2

问题出在你的下面代码的click绑定上；
$("#dateconfirm").click(function () {
            var datestr = $("#yearwrapper ul li:eq("+indexY+")").html()+"-"+
                          $("#monthwrapper ul li:eq("+indexM+")").html()+"-"+
                          $("#daywrapper ul li:eq("+indexD+")").html()
                that.val(datestr);
                $("#datePage").hide(); 
                $("#dateshadow").hide();
                return this;
        });
当你执行  $('#beginTime').date()和$('#endTime').date()时 ，上面代码相当于执行了两次，等同于$("#dateconfirm").click(function () {$('#beginTime').val(datestr)});
$("#dateconfirm").click(function () {$('#endTime').val(datestr)});
可以修改成在input事件触发时开始绑定，并且用one绑定事件，或者用bind和unbind
//绑定事件（默认事件为获取焦点）
        that.bind("click",function () {
          
            /*你的其他代码*/
$("#btn",$("#span")).one("click",function () {
             var datestr = $("#t",$("#span")).val()  
                that.val(datestr);
                $("#span").hide(); 
                return this;
         });
        })  ;