Click event firing multiple times

Question

I am learning to write a plugin for myself, but I got something odd in the code. I have a reset button, and when I click it, it runs as times as the number of input elements I have.

My code: jsbin, jsfiddle

HTML:

<div id="container">
    <div id="createCSVWrap">
        <fieldset>
            <legend> Create the CVS File  </legend>
            <div class="dateWrap">
                <label> 开始时间： </label>

                <div style="float:right">
                    <input id="startTime" name="startTime" type="text" value="13:37:06" />

                </div>
            </div>


        </fieldset>
    </div>

    <input id="f" name="fuck"  value="18:27:56" />
    <input class="tt" name="tt" value="02:07:56" />
    <input name="ok" class="ok"  value="08:07:56" />

</div>

Javascript

$(document).ready(function() {
    $('#startTime').timePicker();

    $('#f').timePicker();
    $('.tt').timePicker();
    $('.ok').timePicker();
});


(function($) {

    $.fn.timePicker = function(options) {
        var defaults = {
            setTimeFocus: 'hour'
        }; //,originalTime :''
        var options = $.extend(defaults, options);

        if ($('#timePicker').length === 0) {
            var timePickerBody = '<div id="timePicker" style="display:none;">' + '<div id="setTimeOption">' + ' <a href="" id="timeReset">RESET</a>' + '</div></div>';

            $("body").append(timePickerBody);
        }

        return this.each(function() {
            var o = options;

            $(this).focus(function() {
                _input = $(this); // ONLY put here can change value of each input field
                originalTime = '';
                //originalTime = {} ;
                intial();
            });

            function intial() {

                showSetTime();
                setTimePickerPosition();
                $('#timeReset ').click(resetTime);
            }

            function showSetTime() {
                $('#timePicker').show();
            }

            function hiddenSetTime() {
                $('#timePicker').hide();
            }

            function setTimePickerPosition() {
                var _inputPosition = _input.offset();

                var _timePickerPosition = [_inputPosition.left, _inputPosition.top + _input.height()];
                var _timePickerPositionLeft = _timePickerPosition[0],
                    _timePickerPositionTop = _timePickerPosition[1];
                $('#timePicker').css({
                    'left': _timePickerPositionLeft + 'px',
                    'top': _timePickerPositionTop + 'px'
                });
            }

            time = 1;

            function resetTime(event) {
                event.preventDefault();
                time++;
                alert(time)

            }


            $(this).click(function(e) {
                e.stopPropagation();
            });

            $('#timePicker').click(function(e) {
                e.stopPropagation();
            });

            $(document).click(function() {
                hiddenSetTime();
            });

        });
        //  ending return this
    };

})(jQuery);

CSS:

#timePicker
{
    position:absolute;
    width:185px;

    padding:10px;
    margin-top:5px;
    background:#F3F3F3;
    border:1px solid #999;
}

Thank you very much!!

Answer 1

I think I see the problem here. It's to do with this bit of code:

$(this).focus(function() {
    _input = $(this); 
    originalTime = '';
    intial();
});

function intial() {
    showSetTime();
    setTimePickerPosition();
    $('#timeReset').click(resetTime);
}

This basically means that every time the user focuses onto the textbox another click handler will get attached to the "Reset" button, thus the same event firing multiple times.

What you need to do is the unbind the old event and reattach a new one, with the unbind event.

$('#timeReset').unbind('click').click(resetTime);

See it working here: http://www.jsfiddle.net/Sc6QB/1/

Answer 2

$('#timePicker input').focus(function(){    
    // code here                  

         }).blur(function(){ 
            // code here
        });
         // ending time input focus

Please tell me how can I rewrite this kind of event chain into function mode in plugin template? And should I use the unbid() with all JQuery events for prevent multiple times fired? Thank you very much for your kind of help!!