Make onclick event stick after page reload

Question

I have Javascript that opens another window and registers a click handler for all the links:

//Inside a class somewhere
this.file_browser_window = $(window.open("/filebrowser", "file_browser_window",
        "width=800,height=600"))

Event.observe(this.file_browser_window, 'load', function (){
     //This is the event I am after
     Event.observe(this.file_browser_window, 'click', handle_click_in_browser);
}.bindAsEventListener(this));

// The Handler function
function handle_click_in_browser(evt){
   evt.stop();  

   url = evt.target.href;

   if(url && url.endsWith('.png')){
       console.log("Image clicked");
       //REMMEMBER THIS URL ON MAIN PAGE
       this.close();
   }
   else{
       console.log("Regular stuff clicked", this);
       this.location = url; //<-- THIS is the breaking point
   }
}

However, when the user clicks on some link in that popup window, when the page reloads, my CLICK handlers are gone!

The links in the popup window point to the same domain.

Now, I cannot alter the source(html) on the popup window. I need to catch the href of the link-tag (if it points to image) that the user clicked on.

I am running django-filebrowser in the popup window if anyone is interested.

Answer 1

You should be applying your click event handlers for the popup page, within the popup page itself. I don't see any reason to make the parent window responsible for these event handlers.