Why this codeblock is creating an infinite loop?
<p>I was playing with a fiddle earlier today while trying to answer a question and found a confusing thing. Being a JS newbie I am not being able to debug whats going wrong myself. I even tried to check the source0 of <code>$.fn.show</code> in jQuery source but couldn't figure out whats going wrong.</p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;input type='text' id='dataBox'/&gt;
&lt;input type='button' value='toggle' id='toggleButton' /&gt;​
</code></pre>

<p><strong>jQuery code:</strong></p>

<pre><code>jQuery(function ($) {
    var _oldShow = $.fn.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');
            if(speed)    
                _oldShow.apply(obj, [speed,newCallback]);
            else    
                _oldShow.apply(obj, [newCallback]);
        });
    }
});


$('#dataBox').bind('beforeShow', function () {
        alert('beforeShow');
    });


$('#toggleButton').click(function(){
        $('#dataBox').show();
}); 
</code></pre>

<p>The problem is for some mistake that I did, is causing this line to execute infinite number of times
     obj.trigger('beforeShow');  </p>

<p>and hence the <code>alert</code> in this block</p>

<pre><code> $('#dataBox').bind('beforeShow', function () {
    alert('beforeShow');
 });  
</code></pre>

<p>seems not to stop.</p>

<p>Irrespect of what I am trying to do or if this can be done any other way, can someone please explain what I am doing wrong here. I have been trying for several hours but couldn't figure out.</p>

<p><a href="http://jsfiddle.net/joycse06/evdpj/" rel="nofollow">FIDDLE</a></p>
