點擊事件觸發多次

Question

我正在學習爲自己編寫一個插件，但我在代碼中遇到了一些奇怪的事情。我有一個重置按鈕，當我點擊它時，它會按照我擁有的input元素的數量運行。

我的代碼：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

我想我在這裏看到問題。這是一個與此位的代碼做：

$(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/