CODEWITHSUNDEEP
javascriptjqueryjquery-selectorsthis
Sriram
Sriram

Reputation: 2999

How can I use $(this) reference inside another function?

I have a case like this - 

$('<first-selector>').each(function(){
    $(this).click(function(){
        $('<second-selector>').click(function(){
           /* Here I want to use the top $(this) reference to do some business. 
              I don't want to use like var thisObj = $(this) and refer it inside          
              the click function*/
        });
    });
});

How to use $(this) reference inside another object?

Upvotes: 0

Views: 132

Answers (6)

Ali Exalter
Ali Exalter

Reputation: 420

In this case on DOM ready all the first-selector are bind with click event handler. On clicking first-selector, second-selector is bind to the click event. To use the $(this) which reperesent first-selector you have to write the code as

$('<first-selector>').each(function(){
$(this).click(function(){
    var oldthis = $(this);
    $('<second-selector>').click(function(){
       alert(oldthis.val());
    });
});

});

make sure first-selector tag is not same as second-selector tag. try this in form

jQuery(document).ready(function(){
    jQuery('input[type=text]').each(function(){
        jQuery(this).click(function(){
            var oldthis = jQuery(this);
            jQuery('input.hello').click(function(){
                alert(oldthis.val());
            });
        });
    });
});

First click input text field. It will alert value of input TEXT field when button with hello class is clicked.

Upvotes: 0

VVV
VVV

Reputation: 7593

Although this is not the best solution (because you SHOULD reference it through a variable like the other solutions suggest)... you can always use the parent() method if the second-selector is a child of the first.

$('<first-selector>').each(function(){
    $(this).click(function(){
        $('<second-selector>').click(function(){
          /*$(this) is now referencing <second-selector> and by adding parent() it will go up the elements until it find the requested selector*/
          $(this).parents('<first-selector>').doSomething();
        });
    });
});

Upvotes: 0

codef0rmer
codef0rmer

Reputation: 10520

Use $.proxy

$('div').each(function(){
    $(this).click(function(){
        $('p').click($.proxy(function(){
           console.log($(this)); // returns <div>
           /* Here I want to use the top $(this) reference to do some business. 
              I don't want to use like var thisObj = $(this) and refer it inside          
              the click function*/
        }, this));
    });
});

Demo: http://jsfiddle.net/TRw4X/

Upvotes: 4

Hogan
Hogan

Reputation: 70513

The only way to "solve" your question is to not use jQuery.

Yet you tag your question with jQuery.

What exactly do you want to do here and why is the easy (and a common javascript idiom of using a closure) dismissed by you?

Upvotes: 0

Anoop
Anoop

Reputation: 23208

You can pass reference of the object in jQuery event.

$('<first-selector>').each(function(){
    $(this).click($(this),function(){
        $('<second-selector>').click(function(e){
           var $elem = e.data.
           /* Here I want to use the top $(this) reference to do some business. 
              I don't want to use like var thisObj = $(this) and refer it inside          
              the click function*/
        });
    });
});

Upvotes: 0

user659025
user659025

Reputation:

So you want to use the $(this) from the first function within the second function and refer to it as $(this)? That's not possible since jQuery maintains the this-context. You have to run with something like this:

$('<first-selector>').each(function()
{
    var first = $(this);

    first.click(function()
    {
        $('<second-selector>').click(function()
        {
            var second = $(this);
            // do something with first and second.
        });
    });
});

Upvotes: 0

Related Questions