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="fck"  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;
}

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="fck"  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;
}

• javascript
• jquery
• jquery-plugins
• jquery-events

1 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/Sc6QB/1/