Question

我创建了一个小型jQuery插件，当用户分别点击按钮.show和按钮.hide时，它会显示并隐藏div。我想传递一个函数作为插件选项来对onhide进行一些特定的处理。但onhide函数执行的次数与点击显示和隐藏按钮的次数相同。

这是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只会做一次。

＆＃13;

$.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').unbind('click').one('click',function(){
        var id = $(this).data('id');
        $('#'+id).hide();
        if (Options.onHide.call() === false) {
          return;
        }

      });

    });
  });
};

$('.show').showhide({
  onHide :function() {
    alert('hide');
  }
});

＆＃13;

<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>

＆＃13;

<强>更新

我在unbind('click')之前添加one以取消绑定旧听众。

jquery插件函数多次覆盖执行函数

2 个答案: