Question

I have the following code:

    function init() {
        var $contentButtonPanel: JQuery = $('#content-button-panel')
        $contentButtonPanel
            .find('.arbo .toggle, .collapsible-list li:has(ul) > :first-child, .collapsible-list li:has(ul) > :first-child + span')
            .click(function (event) {
                $(this).toggleBranchOpen();
            });
    }

    $.fn.toggleBranchOpen = function () {
        this.each(function () {
            $(this).closest('li').toggleClass('closed');
        });
        return this;
    };

When I debug I can see that the $(this).toggleBranchOpen(); line is reached. However the code does not go inside that function.

Is this a problem with the way that toggleBranchOpen is declared? Note that the only time toggleBranchOpen is used is inside of the init function click event. Is it possible for me to move that code into the init and simplify things?

Answer 1

Please try this code:

function init() {
    $('#content-button-panel')
        .find('.arbo .toggle, .collapsible-list li:has(ul) > :first-child, .collapsible-list li:has(ul) > :first-child + span')
        .click(function (event) {
            $(this).closest('li').toggleClass('closed');
        });
}

Since you indicated that you don’t need the global function, I tried to simplify the code a bit.

Hope that helps.