Cliquez sur le tir de l'événement plusieurs fois

Question

J'apprends à écrire un plugin pour moi-même, mais j'ai quelque chose d'étrange dans le code. J'ai un bouton de réinitialisation, et quand je clique dessus, il s'exécute au nombre de input éléments 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; 
} 

Merci beaucoup !!

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 click sera attaché au bouton « Reset », donc le même événement tirant à plusieurs reprises.

Ce que vous devez faire est de dissocier l'ancien événement et d'en rattacher un nouveau, avec l'événement unbind.

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

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