如何覆盖JQuery的.show（）和.hide（）触发事件之前和之后？

本文介绍了如何覆盖JQuery的.show（）和.hide（）触发事件之前和之后？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我尝试使用JQuery的.show和.hide方法来启动触发器事件， code> $（document）.ready（function（）{ $（'＃dataBox'）。bind（'afterShow'，function（）{ alert（'afterShow'）; }）; $（'＃dataBox'）。bind（'afterHide'，function（）{ alert（'afterHide'）; }）; $（'＃dataBox'）。bind（'beforeShow'，function（）{ alert（'beforeShow'）; }）; $（'＃dataBox'）。bind 'beforeHide'，function（）{ alert（'beforeHide'）; }）; $（'＃toggleButton'）。 $（'＃dataBox'）。is（'：visible'））{ $（'＃dataBox'）。hide（）; } else { $（' ）.show（）; } }）; }）; jQuery（function（$）{ var _oldShow = $ .fn.show; //覆盖jQuery的'show（）'方法， $ .fn.show = function（speed，oldCallback）{ return $（this）.each（function（）{ var obj = $（this）， newCallback = function（）{ if（$ .isFunction（oldCallback））{ oldCallback.apply（obj）; } obj.trigger（'afterShow'）; }; obj.trigger（'beforeShow'）; _oldShow.apply（obj，[speed，newCallback]）; }）; } }）; jQuery（function（$）{ var _oldHide = $ .fn.hide; //覆盖jquery的hide $ .fn.hide = function（speed，oldCallback）{ return $（this）.each（function（）{ var obj = $（this）， newCallback = function（）{ if（$ .isFunction（oldCallback））{ oldCallback.apply（obj）; } obj.trigger（'afterHide'）; }; obj.trigger（'beforeHide'）; _oldHide.apply（obj，[speed，newCallback]）; }）; } }）;

我有以下标记：

< input type ='text'id ='dataBox'/> < input type ='button'value ='toggle'id ='toggleButton'/>

当我单击切换按钮时，'beforeHide'和'beforeShow'事件被触发，而'afterShow '和'afterHide'不是。任何人都可以告诉我我做错了什么？

解决方案

检查 demo fiddle 。希望工作

$。show / $ .hide - 覆盖函数：

（function（$）{ $ .override = {'show'：$ .fn.show，'hide'：$ .fn.hide}; $ .each（$。override，function（M，F）{ var m = M.replace（/ ^ \w /，function（r）{return r.toUpperCase （）;}）; $ .fn [M] = function（speed，easing，callback）{ var args = [speed || 0，easing || '$'; args [2] = speed; args [0] = 0; } else if（$ .isFunction（easing））{ args [2] = easing; args [1] =''; } if（！this.selector）{ F.apply（this，arguments）; return this; } return this.each（function（）{ var obj = $（this）， oldCallback = args [args.length-1]， newCallback = function（）{ if（$ .isFunction（oldCallback））{ oldCallback.apply（obj）; } obj.trigger（'after'+ m）; }; obj.trigger（'before'+ m）; args [args.length-1] = newCallback; // alert（args）; F.apply（obj，args）; }）; } }）; }）（jQuery）;

使用

jQuery（function（$）{ var $ dataBox = $（'＃dataBox'）。bind（'beforeHide afterHide beforeShow afterShow'，function（e）{ alert（e.type）; }）; $（'＃toggleButton'）。bind（'click'，function（）{ $ dataBox [$ dataBox.is（'：visible'）？'hide'：'show']（100，'swing'，function（）{alert（'end of animation'）;}）; return false; }）; }）;

I am tryign to override the JQuery's .show and .hide methods to launch trigger events before and after they are called with the following code.

$(document).ready(function () { $('#dataBox').bind('afterShow', function () { alert('afterShow'); }); $('#dataBox').bind('afterHide', function () { alert('afterHide'); }); $('#dataBox').bind('beforeShow', function () { alert('beforeShow'); }); $('#dataBox').bind('beforeHide', function () { alert('beforeHide'); }); $('#toggleButton').click(function(){ if($('#dataBox').is(':visible')) { $('#dataBox').hide (); } else { $('#dataBox').show(); } }); }); jQuery(function ($) { var _oldShow = $.fn.show; //Override jquery's 'show()' method to include two triggered events before and after $.fn.show = function (speed, oldCallback) { return $(this).each(function () { var obj = $(this), newCallback = function () { if ($.isFunction(oldCallback)) { oldCallback.apply(obj); } obj.trigger('afterShow'); }; obj.trigger('beforeShow'); _oldShow.apply(obj, [speed, newCallback]); }); } }); jQuery(function ($) { var _oldHide = $.fn.hide; //Override jquery's 'hide()' method to include two triggered events before and after $.fn.hide = function (speed, oldCallback) { return $(this).each(function () { var obj = $(this), newCallback = function () { if ($.isFunction(oldCallback)) { oldCallback.apply(obj); } obj.trigger('afterHide'); }; obj.trigger('beforeHide'); _oldHide.apply(obj, [speed, newCallback]); }); } });

I have the following Markup:

<input type='text' id='dataBox'/> <input type='button' value='toggle' id='toggleButton' />

When I click the toggle button the 'beforeHide' and 'beforeShow' events are triggering while the 'afterShow' and 'afterHide' aren't. Can anyone clue me in as to what I am doing wrong?

解决方案

plz check the demo fiddle . hope it works

$.show / $.hide - override function:

(function($){ $.override ={'show': $.fn.show, 'hide': $.fn.hide}; $.each($.override,function(M,F){ var m=M.replace( /^\w/, function(r){ return r.toUpperCase(); }); $.fn[M] = function(speed, easing, callback) { var args=[speed||0,easing||'',callback||function(){}]; if( $.isFunction(speed)){ args[2]=speed; args[0]=0; } else if( $.isFunction(easing)){ args[2]=easing; args[1]=''; } if(!this.selector){ F.apply(this, arguments); return this; } return this.each(function () { var obj = $(this), oldCallback = args[args.length-1], newCallback = function () { if ($.isFunction(oldCallback)){ oldCallback.apply(obj); } obj.trigger('after'+m); }; obj.trigger('before'+m); args[args.length-1]=newCallback; //alert(args); F.apply(obj,args); }); } }); })(jQuery);

usage

jQuery(function($){ var $dataBox=$('#dataBox').bind('beforeHide afterHide beforeShow afterShow', function(e) { alert(e.type); }); $('#toggleButton').bind('click',function(){ $dataBox[$dataBox.is(':visible')?'hide':'show'](100,'swing',function(){ alert('end of animation');}); return false; }); });