jquery - 自定义 jQuery 事件仅触发一次

Question

我正在使用此代码创建 onshow 事件:

(function($){
  $.fn.extend({ 
    onShow: function(callback, unbind){
      return this.each(function(){
        var obj = this;
        var bindopt = (unbind==undefined)?true:unbind; 
        if($.isFunction(callback)){
          if($(this).is(':hidden')){
            var checkVis = function(){
              if($(obj).is(':visible')){
                callback.call();
                if(bindopt){
                  $('body').unbind('click keyup keydown', checkVis);
                }
              }                         
            }
            $('body').bind('click keyup keydown', checkVis);
          }
          else{
            callback.call();
          }
        }
      });
    }
  });
})(jQuery);

然后我调用它:

$(document).ready(function(){

    $('.mydiv').onShow(function(){
        alert('myDiv is now showing');

    });

});

我还切换了触发 div 显示和隐藏的链接:

$('.myLink').click(function(){
        $(".mydiv").slideToggle();
});

最后是 html:

<a href="#" class="myLink">Step 1</a>
        <div class="myDiv">content here</div>

问题是，当我在页面加载后单击链接时，警报仅显示一次。如果我再次点击它，我将不会显示。

有什么想法吗？

Answer 1

我认为这是对 javascript 中事件如何工作的误解。您的自定义扩展所做的只是运行一次。 $('body').bind('click keyup keydown', checkVis); 行监听 click keyup 和 keydown 事件，但此监听器仅适用于隐藏且已通过的元素if($(this).is(':hidden')){ 检查。

因此，如果相关元素开始处于隐藏状态，它将在“单击 keyup 和 keydown”时以 checkVis 进行响应，但这是在 onShow< 之后运行任何内容的唯一实例 扩展首次运行完毕。

.slideToggle(); 默认情况下不会触发任何事件，因此您的扩展程序无法监听此类事件的触发。

最接近监听元素改变其可见性的方法是使用 dom 突变事件之类的东西，但它已被弃用，并且不支持跨浏览器。

如果您确实需要能够在 jQuery“显示”元素时运行扩展，我能想到的最好方法是扩展您希望用来触发自定义事件的 jQuery 函数，这看起来像是像这样:

    var existingSlideToggle = $.fn.slideToggle;

    $.fn.slideToggle = function(){
         var returner = existingSlideToggle(this, arguments);
         $(this).trigger('customOnShowEvent');
         return returner;
    }

然后你可以这样做:

    $('#foo').on('customOnShowEvent', function(){  
       // do stuff 
    });

或者继续您的扩展策略:

(function($){
  $.fn.extend({ 
    onShow: function(callback, unbind){
      return this.each(function(){
        var obj = this;
        var bindopt = (unbind==undefined)?true:unbind; 

        var localRun = function(){
          if($(obj).is(':hidden')){
            var checkVis = function(){
              if($(obj).is(':visible')){
                callback.call();
                if(bindopt){
                  $('body').unbind('click keyup keydown', checkVis);
                }
              }                         
            }
            $('body').bind('click keyup keydown', checkVis);
          }
          else{
            callback.call();
          }
        }

        if($.isFunction(callback)){
            localRun();
            $(obj).on('customOnShowEvent', localRun);
        }

      });
    }
  });
})(jQuery);

这样它将第一次运行，然后每当新的“customOnShowEvent”被触发(“触发”)时重新运行。