click handler gets called immediately for document using jquery

menuClick: function () {
            var _this = this;
            var clickNamespace = 'click.menu-item' + this.get('currentComponentIndex');

            Ember.$(document).on(clickNamespace, function (event) {
                if (!Ember.$(_this.getSourceFromEvent(event)).closest(_this.$('.menu-item')).length)    {
                    Ember.$(document).off(clickNamespace);
                    _this.set('isSubmenuVisible', false);       
                }
            });
            this.set('isSubmenuVisible', true);
        },

Whenever there is a click on a menu-button a click handler is registered and when the click happens anywhere else in the body the click handler is de-registered. When i do Ember.$('body').on it works perfectly fine but when i do Ember.$(document).on, the handler is called immediately along with handler registration. The handler is not called after clicking but immediately when the registration happens! What is the reason?