JavaScript Object Literal "this" keyword jQuery Callbacks Argument Passing

Question

What am I doing wrong here? I'm super frustrated here. I'm stuck @ when I call Menu.mouseHandler and since it's being passed an argument it seems to lose its value of this?

Code: http://jsfiddle.net/W6KsU/19/

var Menu = Menu || {};

Menu = {
    docHeight: jQuery("document").height(),
    menuOffset: jQuery("#menu").offset(),
    index:0,
    menuItem:"",
    menuItemName:"",
    menuItemPure:"",
    killMenu: function () {
        jQuery.each(['#menuApplyForCredit', '#menuBuyOrLease', '#menuVehicleProtection', '#menuCommercialFinancing', '#menuFinanceTools'], function () {
            jQuery(menuItem).unbind("mouseenter mouseleave", function () {
                console.log("NO CLICK! DO NOTHING~");
            });
        });
    },

    initialize: function () {
        if (jQuery.browser.ios) {
            jQuery.each(['#menuApplyForCredit', '#menuBuyOrLease', '#menuVehicleProtection', '#menuCommercialFinancing', '#menuFinanceTools'], this.touchHandler);
        } else {
            jQuery.each(['#menuApplyForCredit', '#menuBuyOrLease', '#menuVehicleProtection', '#menuCommercialFinancing', '#menuFinanceTools'], this.mouseHandler);
        }
    },

    touchHandler: function (i, v) {
        var _that = this,
        this.index = i;
        this.menuItem = v;
        this.menuItemPure = menuItem.replace('#menu', '');
        jQuery(menuItem).bind("touchstart touchend", _that.onTouch);
    },

    mouseHandler: function (i, v) {
        this.index = i;
        this.menuItem = v;
        console.log("mouseHandler: menuItem= "+this.menuItem);
        this.menuItemName = jQuery(this.menuItem).find("a:first img").attr("src");
        this.menuItemPure = this.menuItem.replace('#menu', '');

        console.log("menuItemName=" + this.menuItemName);
        console.log("menuItemPure=" + this.menuItemPure);

        jQuery(this.menuItem).bind("mouseenter", Menu.onEnter);
        //console.log(jQuery(this.menuItem).bind("mouseenter", Menu.onEnter))
        //jQuery(this.menuItem).bind("mouseenter", jQuery.proxy(Menu.onEnter, Menu));
        jQuery(this.menuItem).bind("mouseleave", jQuery.proxy(Menu.onLeave, Menu));
    },

    onEnter: function () {
          console.log("CALLED!");
        //console.log("evt= "+this);
        //console.log("this= "+this);
        //console.log("onEnter menuItem= " + menuItem);
        jQuery('#menu_overlay').clearQueue().stop().css({
            'display': 'block'
        }).animate({
            opacity: '.3'
        }, 200).height(this.docHeight);
        //console.log("onEnter menuItemPure= "+ menuItemPure);
        jQuery("#megaMenu" + menuItemPure + "Div").addClass("hovering");
        jQuery(menuItem).find("a:first").find("img").attr("src", "images/bttn" + menuItemPure + "Over.png").css({
            "z-index": "99"
        });
    },

    onLeave: function () {
        var _that = this;
        console.log("onLeave= "+ menuItem);
        var relX = Math.round(evt.pageX - this.menuOffset.left),
            relY = evt.pageY - this.offsetTop;
        if ((relX < 960 && relX > 0) && (relY < 41 && relY > 0)) {
            jQuery("#megaMenu" + menuItemPure + "Div").removeClass("hovering");
            if (menuItemName.indexOf("Stay") > -1) {
                jQuery(menuItem).find("a:first").find("img").attr("src", "images/bttn" + menuItemPure + "Stay.png").css({
                    "z-index": "1"
                });
            } else {
                jQuery(menuItem).find("a:first").find("img").attr("src", "images/bttn" + menuItemPure + ".png").css({
                    "z-index": "1"
                });
            }
        } else {
            jQuery('#menu_overlay').css({
                'display': 'none'
            }).animate({
                opacity: '0'
            }, 100);
            jQuery("#megaMenu" + menuItemPure + "Div").removeClass("hovering");
            if (menuItemName.indexOf("Stay") > -1) {
                jQuery(menuItem).find("a:first").find("img").attr("src", "images/bttn" + menuItemPure + "Stay.png").css({
                    "z-index": "1"
                });
            } else {
                jQuery(menuItem).find("a:first").find("img").attr("src", "images/bttn" + menuItemPure + ".png").css({
                    "z-index": "1"
                });
            }
        }
    },

    onTouch: function () {
        jQuery('#menu_overlay').clearQueue().stop().hide().css({
            'display': 'block'
        }).animate({
            opacity: '.3'
        }, 200).height(this.docHeight);
        jQuery("#megaMenu" + menuItemPure + "Div").removeClass("hovering").addClass("hovering");
        jQuery(menuItem).find("a:first").find("img").attr("src", "images/bttn" + menuItemPure + "Over.png").css({
            'z-index': '99'
        });
    }
}

Menu.initialize();

Typo under touchHandler, var _that = this, <- terminate with semicolon. — hyperslug
– hyperslug, Commented Feb 4, 2012 at 22:55
What are you actually accomplishing / trying to accomplish by assigning to properties of this in mouseHandler? Those properties are just being reassigned on each iteration / invocation of the callback. — JMM
– JMM, Commented Feb 4, 2012 at 23:05
Yes I see that. I'm trying accomplish keeping alive the iterating / invoking down the chain of methods. Maybe this is the wrong approach to this but I'm just working it out. — SLB
– SLB, Commented Feb 4, 2012 at 23:21
I'm not positive I know what you mean, but if you mean where you're attaching mouseenter / mouseleave in mouseHandler, those listeners are being bound to the DOM elements that your selectors (the v argument to mouseHandler) refer to. If you're trying to make sure this refers to Menu in onEnter / onLeave, use jQuery.proxy, which I see you're already doing in one place. If you want this to refer to Menu in mouseHandler, see my answer. — JMM
– JMM, Commented Feb 4, 2012 at 23:41
jsfiddle.net/W6KsU/22 - Yes, I guess I understand the proxy'ing to refer to this, but yes I'm having trouble keeping on to onEnter and binding those events to those methods while passing the iterative value "v" as menuItem to the jQuery object. jQuery(menuItem) //undefined. Do I need to proxy that as well? — SLB
– SLB, Commented Feb 5, 2012 at 0:50

JMM · Accepted Answer · 2012-02-04 23:33:45Z

1

With your code, this should refer to the value of the current item of the array you pass as the first argument. If you want this to refer to Menu, try:

jQuery.each(

  [

    '#menuApplyForCredit',

    '#menuBuyOrLease',

    '#menuVehicleProtection',

    '#menuCommercialFinancing',

    '#menuFinanceTools'

  ],

  jQuery.proxy( this.mouseHandler, this )

);

See jQuery.each() docs.

In the case of an array, the callback is passed an array index and a corresponding array value each time. (The value can also be accessed through the this keyword

And see the docs for the jQuery.proxy( function, context ) version of jQuery.proxy().

edited Feb 4, 2012 at 23:33

answered Feb 4, 2012 at 22:58

JMM

26.9k3 gold badges54 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript Object Literal "this" keyword jQuery Callbacks Argument Passing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related