javascript pass var to anonymous function

Question

Apologies if this is a stupid beginners question, but I'm stuck.

I have some jquery code to get some HTML from the server, which I then wish to paste in a provided div. The div is set as data-target. So I use the $($(this).attr('data-target')) context to find the target div. However in the .done() function, I'm no longer in the context and I can't find the target div.

$('.popout-button').click(function (event) {
    event.preventDefault();
    targetElem = $($(this).attr('data-target'));
    //request
    $.get("ajax.php", {
        action: "defInfo",
        class: "Cats22"
    })
        .done(function (data) {
            //Dump the data
            //This doesn't work. Can I pass targetElem somehow?
            targetElem.html(data);
        });
});

Use var targetElem = ... - that will make the variable local to the .click() handler, and accessible from the .done() handler because it declared inside the .click() handler. Your current code without var will make targetElem global, which could still work unless that click handler applies to multiple buttons and they are clicked in quick succession before the ajax calls return. — nnnnnn
– nnnnnn, Commented Dec 31, 2013 at 8:55
use var targetElem = $($(this).attr('data-target')); - declare it as a local variable — Arun P Johny
– Arun P Johny, Commented Dec 31, 2013 at 8:55

A Paul · Accepted Answer · 2013-12-31 08:53:01Z

1

If you declare your targetElem at global level i.e. out side the function and then initialize it then I think it will work i.e. you can access it from inside the done function

var targetElem;
$('.popout-button').click(function(event) {
    event.preventDefault();

    targetElem = $($(this).attr('data-target'));

    //request
    $.get("ajax.php", {action: "defInfo", class: "Cats22"})
            .done(function(data) {
                //Dump the data

                //This doesn't work. Can I pass targetElem somehow?
                targetElem.html(data);

            });
});

answered Dec 31, 2013 at 8:53

A Paul

8,3113 gold badges33 silver badges65 bronze badges

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

Comments

Shomz · Accepted Answer · 2013-12-31 08:57:03Z

0

If you want to avoid dealing with the scopes and access the element from a lower level, you can add an id to your element, or, if you can't (for whatever the reason), you can add a class name dynamically... like this:

$($(this).attr('data-target')).addClass('target');

Then, just select it again within the done() function like this:

var targetElem = $('.target');
targetElem.html(data);

answered Dec 31, 2013 at 8:57

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

2 Comments

nnnnnn Over a year ago

But why would you want to select it again within the .done() function when you already have a reference to it that is in scope?

Shomz Over a year ago

@nnnnnn Not sure what's going on in the rest of the code, so this is to avoid potential scoping issues. I hear you, no reason why OP's example shouldn't work, but maybe he wants a different approach.

Collectives™ on Stack Overflow

javascript pass var to anonymous function

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related