jquery插件函數重載執行函數很多次

Question

我創建了一個小的jQuery插件，當用戶分別點擊按鈕.show和按鈕.hide時，顯示並隱藏div。我想傳遞一個函數作爲插件選項來爲onhide做一些特定的處理。但是，onhide函數執行的次數與show和hide按鈕的點擊次數相同。

這是jsfiddle。

當您單擊多次顯示/隱藏按鈕後，警報將顯示相同的次數。

我認爲它應該只提醒一次隱藏按鈕。

$.fn.showhide = function(options){ 

    var popup = this; 
      defaultOptions = { 
       onHide : function() { }, 
      onShow : function() { } 
     }; 
     var Options = $.extend({},defaultOptions, options); 
      this.each(function() {   
     $(this).on('click',function(e){ 
     var id = $(this).data('id'); 
     $('#'+id).show(); 
     $('.hide').on('click',function(){ 
      var id = $(this).data('id'); 
      $('#'+id).hide(); 
      if (Options.onHide.call() === false) { 
        return; 
       } 

     }); 

      }); 
     }); 
} 

$('.show').showhide({ 
onHide :function() { 
    alert('hide'); 
} 

} 
); 

Answer 1

這是因爲你在一個循環內實現你的onHide方法。

移至該位：

$('.hide').on('click',function(){ 
     var id = $(this).data('id'); 
     $('#'+id).hide(); 
     if (Options.onHide.call() === false) { 
       return; 
      } 

    }); 

向右你的方法和一切你右括號前工作正常！

編輯：小提琴這裏：https://jsfiddle.net/ka9gw09t/10/

Answer 2

只需更換

$('.hide').on('click',function(){ 

要

$('.hide').one('click',function(){ 

說明：

與您的代碼，用戶每次點擊.show你附加多一個代表團.click到按鈕。 one只會做一次。

$.fn.showhide = function(options){ 
 

 
    var popup = this; 
 
    defaultOptions = { 
 
    onHide : function() { }, 
 
    onShow : function() { } 
 
    }; 
 
    var Options = $.extend({},defaultOptions, options); 
 
    this.each(function() { \t \t 
 
    $(this).on('click',function(e){ 
 
     var id = $(this).data('id'); 
 
     $('#'+id).show(); 
 
     $('.hide').unbind('click').one('click',function(){ 
 
     var id = $(this).data('id'); 
 
     $('#'+id).hide(); 
 
     if (Options.onHide.call() === false) { 
 
      return; 
 
     } 
 

 
     }); 
 

 
    }); 
 
    }); 
 
}; 
 

 
$('.show').showhide({ 
 
    onHide :function() { 
 
    alert('hide'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="show" data-id="123"> 
 
Show 
 
</button> 
 
<button class="hide" data-id="123"> 
 
Hide 
 
</button> 
 
<div class="showhide" id="123" style="display:none;"> 
 
This is div with id 123 
 
</div>

更新

我加入unbind('click')的one之前解除綁定舊的聽衆。