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

Share Improve this question Follow edited Jun 14, 2019 at 22:17 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Sep 19, 2010 at 9:28 qinHaiXiangqinHaiXiang 6,4291212 gold badges4848 silver badges6161 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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/