Playing around with jQuery objects and variables

Question

    $('div#Settings ul li').click(function () {
        var url, template;
        var self = $(this);
        if (!$(self).hasClass('selected')) {
            var ContextMenu = CreateContext($(self));
            var id = $(self).attr('id');

etc...

function CreateContext(item) {
        var ContextMenu = $('div#ContextMenu');
        if (!$(ContextMenu).length) {
            $('<div id="ContextMenu"></div>').appendTo('body');
            CreateContext(item);
        }
        $(ContextMenu).slideUp(150, 'swing', function () {
            $(ContextMenu).insertAfter(item);
        });
        $(item).addClass('selected').siblings().removeClass('selected');
        return $(ContextMenu);
    }

On the first call to CreateContext(item) I cannot use the variable ContextMenu later in the .click code. However, if CreateContext is called twice, everything works fine. I am getting an undefined variable when i console.log(ContextMenu) the first time. The second time it gets the object correctly. How can I fix this? Thanks.

jfriend00 · Accepted Answer · 2012-01-14 00:39:06Z

2

That's because div#ContextMenu doesn't exist the first time you call CreateContext. In fact your function detects that condition and then creates it. But, after creating it, you don't populate the value of ContextMenu inside your function so the rest of the function doesn't work properly.

Here's what I would suggest:

function CreateContext(item) {
    var ContextMenu = $('#ContextMenu');
    if (!ContextMenu.length) {
        ContextMenu = $('<div id="ContextMenu"></div>');
        ContextMenu.appendTo('body');
    }
    ContextMenu.slideUp(150, 'swing', function () {
        ContextMenu.insertAfter(item);
    });
    $(item).addClass('selected').siblings().removeClass('selected');
    return ContextMenu;
}

Note, once ContextMenu is a jQuery object, you don't have to surround it with $() after that as it's already a jQuery object.

edited Jan 14, 2012 at 0:39

answered Jan 14, 2012 at 0:33

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

4 Comments

jfriend00 Over a year ago

@user1027620 - You are creating and appending it, but you weren't setting the value of the local variable ContextMenu after creating it so the rest of the code couldn't use the one you just created. Note how my suggested code sets the value of ContextMenu when creating it.

jfriend00 Over a year ago

@user1027620 - you'll have to show me what code you're using. I've edited mine a few times so I'm not sure which one you grabbed.

jfriend00 Over a year ago

@user1027620 - you are not supposed to put the solution in your question. You are supposed to check the checkmark by the answer that offers you the best solution to indicate that that answer is the best solution and to give the answerer credit for offering it.

user1027620 Over a year ago

Yeah I can't check it yet. Says I can in a minute.

dyelawn · Accepted Answer · 2012-01-14 00:33:29Z

1

Try taking the jQuery indicator out of your function. Since you've declared the variable as a jQuery object, I don't believe you need to identify it as a jQuery object AGAIN in your function.

answered Jan 14, 2012 at 0:33

dyelawn

7705 silver badges17 bronze badges

Collectives™ on Stack Overflow

Playing around with jQuery objects and variables

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related