JQuery nested this references

Question

I have some JQuery Code as follows:

$("#sh-zone-button-cart-menu").live("click", function(event)
{
    event.preventDefault();
    $("#sh-zone-cart-menu").toggle(0, function(){
        if($(this).is(":visible")){
            $(this).siblings(".sh-zone-button-link-menu-content").hide();
            $("#sh-zone-button-cart-menu").parent().removeClass("current");
            //need to reference (this) for $("#sh-zone-button-cart-menu") here 
        }               
    });
    $("#sh-zone-button-cart-menu").parent().toggleClass("current"); 
});

I am trying to access the this reference for my initial click from within another sub-element i.e. I would like to get the this reference that would have been available just after the first curly brace of my live() method. However, I need access to it from within another sub-element i.e. inside my toggle() method.

How can I do this?

Thanks.

I'm shocked this hasn't been up-voted more... you just saved me some time. I didn't know that JavaScript lambda functions could capture local variables like this! — RonLugge, Jan 14 '13 at 20:57

score 15 · Accepted Answer · answered May 04 '11 at 20:09

Save this as a local variable:

$("#sh-zone-button-cart-menu").live("click", function(event) {
    // This line saves the current 'this' as a local variable 
    // that can be accessed by inner functions        
    var thisInClick = this;
    event.preventDefault();
    $("#sh-zone-cart-menu").toggle(0, function(){
        if($(this).is(":visible")){
            $(this).siblings(".sh-zone-button-link-menu-content").hide();
            $("#sh-zone-button-cart-menu").parent().removeClass("current");
            //need to reference (this) for $("#sh-zone-button-cart-menu") here 
            $(thisInClick).doSomething();
        }               
    });
    $("#sh-zone-button-cart-menu").parent().toggleClass("current"); 
});

Thanks Juan. This solved the problem. I just used var elem = $(this) and then called it where I needed to. Cheers. — ObiHill, May 04 '11 at 21:00
Just getting into jQuery and ran into a similar problem. This concept just saved me a lot of headache. — brooklynsweb, Jul 28 '15 at 03:22

score 3 · Answer 2 · answered May 04 '11 at 20:09

Here is a watered-down sample to show you the general technique.

$("#sh-zone-button-cart-menu").live("click", function(event)
{
    var that = this;

    $("#sh-zone-cart-menu").toggle(0, function(){
        alert($(that).attr('id'));
        alert($(this).attr('id'));
    });

});

score 2 · Answer 3 · answered May 04 '11 at 20:09

You can save a reference to this in a variable, so you can use it later.

$("#sh-zone-button-cart-menu").live("click", function(event)
{
    event.preventDefault();
    var that = this;
    $("#sh-zone-cart-menu").toggle(0, function(){
        if($(this).is(":visible")){
            $(this).siblings(".sh-zone-button-link-menu-content").hide();
            $("#sh-zone-button-cart-menu").parent().removeClass("current");
            //need to reference (this) for $("#sh-zone-button-cart-menu") here
            $(that).show(); // <= "that" is sh-zone-button-cart-menu
        }               
    });
    $("#sh-zone-button-cart-menu").parent().toggleClass("current"); 
});

score 0 · Answer 4 · answered May 04 '11 at 20:10

0

Inside the live callback, you have another method 'toggle'. The this keyword here refers to the specific element with ID of $('#sh-zone-cart-menu').

If you want to access that reference, simply use that selector.

answered May 04 '11 at 20:10

Tejs

40,736
10
68
86

1

The point is he doesn't want to have to select again since it was already available as `this`. No need to do extra work. – Ruan Mendes May 04 '11 at 20:13

JQuery nested this references

4 Answers4

Linked

Related