Cliquez sur l'événement de tir à plusieurs reprises

Question

J'apprends à écrire un plugin pour moi-même, mais je me suis quelque chose d'étrange dans le code. J'ai un bouton de remise à zéro, et quand je clique dessus, il fonctionne comme fois que le nombre d'éléments de input que j'ai.

Mon 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;
}

Answer 1

Je pense que je vois le problème ici. Il est à voir avec ce morceau de code:

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

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

Cela signifie que chaque fois que l'utilisateur se concentre sur la zone de texte un autre gestionnaire de click sera attaché au bouton « Reset », donc le même événement tirant à plusieurs reprises.

Ce que vous devez faire est le unbind l'ancien événement et refixer un nouveau, avec l'événement unbind.

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

voir travailler ici: http://www.jsfiddle.net/Sc6QB/1/