Remove <div> added by Javascript after timeout
===

I have gone through a number of examples on SO (including [this one][1] and [this one][2]) to try and resolve an issue I'm having.

Using the script below I am adding an overlay to the page with a 'spinning' image to indicate to the user that the system is busy processing after they clicked the button. 

    ACME.global = ACME.global ? ACME.global : {
        init: function() {
            $(".ctaButton").bind("click", this.pageLoadingOverlay);
        },
        pageLoadingOverlay : function(event) {
            var body = document.getElementsByTagName("body");
            var pageOverlay = document.createElement("div");
            pageOverlay.id = "onClickPageOverlay";
            body[0].appendChild(pageOverlay);
            setTimeout(function() {
                $('#onClickPageOverlay').remove();
            }, 1000);
        }
    }

If I leave out the timeout functionality

            setTimeout(function() {
                $('#onClickPageOverlay').remove();
            }, 30000);

The click event is properly bound to the button and the overlay is loaded. The problem is that the UI could then get stuck on the overlay display (the system rendering the page does not have a "refresh" or "back" button so the user can't reload the page).

However adding the full script it appears that the onClick event is no longer bound to the script.

I've tried various combinations of `setTimeout` and `delay` with no luck. 

Any help greatly appreciated. 


  [1]: http://stackoverflow.com/questions/3163590/jquery-add-content-after-input-element-and-remove-added-content
  [2]: http://stackoverflow.com/questions/4364219/remove-new-div-after-5-seconds