Question

Is it possible to declare a var in jquery.live() (as well as .delegate() & .on()) which can be used in all functions?

Example:

$("#s4-leftpanel-content ul.root > li.static > a").live({
    click: function (event) {
        var hasChildren = $(this).parent('li').children('ul').length > 0;
        if (hasChildren) {
            event.preventDefault();
            $("#s4-leftpanel-content ul.root li.static > ul.static").hide();
            $(this).parent('li').children('ul').toggle();
        }
    },
    mouseover: function () {
        $(this).css('background-color', 'green');
    },
    mouseout: function () {
        $(this).css('background-color', '');
    }
});

Lets say I want to use the bool var hasChildren in the mouseover and mouseout function as well, do I then have to declare that var again in these 2 functions or is there a way in which I can just declare it globally within this current object?

Answer 1

Variables declared with var are always local to the context, in this case the event handler.

You have three possibilities:

Create the variable in a scope reachable by all event handlers

For example:

(function() {
    var hasChildren;

    $("#s4-leftpanel-content ul.root > li.static > a").live({
        // ...
        mouseover: function () {
           hasChildren = $(this).parent('li').children('ul').length > 0;
           $(this).css('background-color', 'green');
        },
        //...
    });
}());

The self-invoking function creates a new scope. hasChildren is only accessible by the event handlers and does not leak into global scope.

Use .data() ^[docs]

.data() allows you to attach arbitrary data to a DOM element.

//...
click: function (event) {    
    var hasChildren = $(this).data('hasChildren');
    if (hasChildren) {
        event.preventDefault();
        $("#s4-leftpanel-content ul.root li.static > ul.static").hide();
        $(this).parent('li').children('ul').toggle();
    }
},
mouseover: function () {
    $(this).data('hasChildren', $(this).parent('li').children('ul').length > 0);
    $(this).css('background-color', 'green');
},
//...

Update:

As @pimvdb noted, as mouseover is always triggered before click, you can just assign the value in your mouseover event handler and then access it in the other handlers either by $(this).data('hasChildren') or just hasChildren, depending on which way you choose (changed the code to reflect this).

Factor out the computation

As the determination whether the element has children or not only depends on the element itself, you could also factor out this line of code into an extra function and call it in every event handler:

(function() {
    function hasChildren(element) {
        return $(element).parent('li').children('ul').length > 0;
    }

    $("#s4-leftpanel-content ul.root > li.static > a").live({
        click: function (event) {    
            var hc = hasChildren(this);
            // ..
        },
        mouseover: function () {
           var hc = hasChildren(this);
           $(this).css('background-color', 'green');
        },
        //...
    });
}());

Of course this comes with the cost of repeating the same computation, but you are at least not repeating code.