Question

我正在学习为自己编写一个插件，但我在代码中遇到了一些奇怪的东西。我有一个重置按钮，当我单击它时，它运行的次数与我拥有的input个元素的数量相同。

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

我想我在这里看到了问题。这与代码有关：

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

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

这基本上意味着每次用户关注文本框时，另一个click处理程序将附加到“重置”按钮，因此同一事件会多次触发。

您需要做的是解除旧事件的绑定，并使用unbind事件重新附加新事件。

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

在此处查看：http://www.jsfiddle.net/Sc6QB/1/

点击事件多次触发

1 个答案: