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之前解除绑定旧的听众。