Question

got kind of a strange behavior here.

(function(){
    var images=document.getElementsByTagName('img');
    for (var i = 0; i < images.length; i++) {
        images[i].parentNode.onclick = function () {
            var embed = "whatever";
            document.body.innerHTML = '<div id="overlay"><div class="game">' + embed + '</div></div>' + document.body.innerHTML;
            document.getElementById('overlay').onclick = function () { this.parentNode.removeChild(this); }
        }
    }
})();

this offcourse is simplified code.
after the overlay is clicked,
the overlay (and the contests) is removed.
but the images onclick evens dont work anymore.
any idea why this is happening?

Answer 1

This is because of the following line:

document.body.innerHTML = '...' + document.body.innerHTML;

Here you concatenate HTML content directly as a string with removing all events bound to all the elements including your images.

Instead of changing innerHTML property I would recommend you to create overlay block dynamically and prepend it to body.