Referencing javascript object within jquery event

Question

I've this code.

var NotificationsBox={
    HideNotificationBox:function()
    {
          document.getElementById("NotificationBox").style.visibility="hidden"; 
    },
    toggleNotificationBox:function()
    {
        $('#NotificationBox').toggle();             
    },
    SetContainerClick_NotificationHide_Event:function()
    {
        $('#Container').click(this.HideNotificationBox);        
    },
    SetNotificationBoxClick_NotificationToggleEvent:function()
    {
        $('#ShowNotification').click(function(){
            $(this).html("0");
            $(this).css("background-color","#000");

            this.toggleNotificationBox();     ///  <-- PROBLEM
        });
    }

};

NotifyBox=Object.create(NotificationsBox);
NotifyBox.HideNotificationBox();
NotifyBox.SetContainerClick_NotificationHide_Event();
NotifyBox.SetNotificationBoxClick_NotificationToggleEvent();

Now you can see what the problem is. Here this will reference to the #ShowNotification and I want to reference NotificationBox here so that I can call the function.

João Silva · Accepted Answer · 2012-08-28 11:46:37Z

Save a reference to this before binding click, and use this reference instead of this within the click event handler:

SetNotificationBoxClick_NotificationToggleEvent:function()
{
    var self = this;
    $('#ShowNotification').click(function(){
        $(this).html("0");
        $(this).css("background-color","#000");

        self.toggleNotificationBox(); //  <-- self will refer to NotificationsBox
    });
}

Or, as an alternative, use NotificationsBox.toggleNotificationBox(), though this will cease to work if you happen to change the name of the variable NotificationsBox:

SetNotificationBoxClick_NotificationToggleEvent:function()
{
    $('#ShowNotification').click(function(){
        $(this).html("0");
        $(this).css("background-color","#000");

        NotificationsBox.toggleNotificationBox();
    });
}

@Mj1992: Yes, it's de de facto way of doing it in JavaScript. You're welcome!

Collectives™ on Stack Overflow

Referencing javascript object within jquery event

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related