Question

I had this function:

function loadCollapse() {
  function collapseDetail() {
    $(this).next().fadeToggle(500);
  }    

  //toggle the componenet with class summary  
  $("span.summary").unbind('click',collapseDetail);
  $("span.summary").click(collapseDetail);
}

This function is bound to the ajaxComplete() event, aka gets executed whenever all ajax requests finish. The weird thing is that the unbind does not work.

It only works when collapseDetail() is defined/moved outside of loadCollapse(). Why?

Is a function inside a function really re-defined everytime that function get’s executed?

Are there any potential memory/performance problems arising from this that i need to worry about?

Answer 1

Every time you call the function, the collapseDetail function will be redefined, thus it will be a different function from the one you created last time. Since it’s a different function, and not the one you bound to at the first call, the unbind won’t have any effect, because this new collapseDetail function was never bound.

Example of one way to solve this:

function generateLoadCollapse() {
    var collapseDetail = function() {
        $(this).next().fadeToggle(500);
    };

    var loadCollapse = function() {
        $("span.summary").unbind('click',collapseDetail);
        $("span.summary").click(collapseDetail);
    };

    return loadCollapse;
}

Another way could be something like:

function generateLoadCollapse() {
    return (function() {
        this.collapseDetail = function() {
            $(this).next().fadeToggle(500);
        };

        $("span.summary").unbind('click',this.collapseDetail);
        $("span.summary").click(this.collapseDetail);
    })();
}

You could then assign the value returned from this function to what you previously had for loadCollapse:

loadCollapse = generateLoadCollapse();