jquery global variables don't work

Question

I am having problems with the following code

$(document).ready(function() {  
var $selection = $('<div class="image-selection" />')
            .css({
                opacity : 0.5,
                position : 'absolute'

            })

var $content = $('.content');

$('img', $content).click(function(){selectItem($(this))});

function selectItem(itemSelected){      

    $image = itemSelected;

    $image.wrap($selection);

    $selection.width(150).height(150);

}

});

I declared $selection as the global variable, but for some reason when it is inside of a function the width or height don't change(The size of the selection changes): if i do the following, it works:

var $selection = $('<div class="image-selection" />')
            .css({
                opacity : 0.5,
                position : 'absolute'

            })

var $content = $('.content');
$selection.width(150).height(150);

I will appreciate very much if some one understands what is happening, and can tell me , i have been trying to figure it out this, but i am really struggling. Thank you so much

Jake Feasel · Accepted Answer · 2012-02-28 00:10:58Z

2

When you wrap $image with $selection, the div is now a new object (a copy of $selection) in the DOM rather than the actual disconnected element in memory. Try changing to this:

$image.wrap($selection);
$image.parent('div.image-selection').width(150).height(150);

answered Feb 28, 2012 at 0:10

Jake Feasel

17k5 gold badges55 silver badges68 bronze badges

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

6 Comments

charlietfl Over a year ago

agree.. or just chain parent() after the wrap

Jake Feasel Over a year ago

Yes, chaining would be good. I just wanted to leave an original line in there unchanged, as a point of reference to the position in the original code.

MariaZ Over a year ago

i tried that before and it works, i just cant understand why i cant use $selection, because of the wrap ?...

MariaZ Over a year ago

oww ... well it seems that if i put the statement $selection.width(150).height(150); before the wrap it works... can you explain what is the wrap doing? i am a little bit confused thanks very much!

Jake Feasel Over a year ago

@ThePrincessKarina because at that point, you're changing the values of a different object. The object wrapping $image is no longer $selection - it is a copy of $selection.

|

Reinstate Monica Cellio · Accepted Answer · 2012-02-28 00:08:13Z

1

You're not declaring it as global - you're declaring it within the scope of the function executed when document.ready. Ideally, put var $selection before document.ready and remove the var when you refer to it inside that function. That will make it global.

answered Feb 28, 2012 at 0:08

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

4 Comments

nnnnnn Over a year ago

It's true it isn't global, but all of the places that use it are also within the document.ready handler so it is in scope.

MariaZ Over a year ago

so when you say that is in scope, doyou mean that it will still work, or do i need to put this variable outside the document.ready ?

nnnnnn Over a year ago

I mean that the variable declaration for $selection does not need to be moved outside document.ready because it will "work" in the sense of being accessible where it is. The problem you are having is not related to this (Jake has explained the real problem).

Reinstate Monica Cellio Over a year ago

@nnnnnn of course, thanks - I misread the question as 2 separate bits of code.

Collectives™ on Stack Overflow

jquery global variables don't work

2 Answers 2

6 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related