Event Binding collides with Loading 01

Dynamic loaded elements(js, html, css ) escape from loading sequence once their elements add new loading sequences

by David Gonzalez

HTML

<div>
            <button id = "buttonAdder">
                Add Image
            </button>
            <label id ="responsesContainer"></label>
            <div id ="galleryContainer">
            
            </div>
        </div>

CSS

h1 { font-weight: bold; }

.blue-text{
    color: blue;
    font-weight: bold;
}

.red-text{
    color: red;
}

.white-background{
    background-color: white;
}

JavaScript

let imageUrl =
"http://files.softicons.com/download/game-icons/super-mario-icons-by-sandro-pereira/ico/Mushroom%20-%201UP.ico";

function addLikeButton(id){
      $(id).append("<button>Like</button>");
      //onclick --> send info to server
      //$(id+" button").addClass("blue-text"); // fix
}

let imageCounter = 0;
function click(event){
		let imageId= `image${++imageCounter}`;
   	let $image =  $(`<div id  = "${imageId}">
   	<img src="${imageUrl}" onload="addLikeButton('#${imageId}')"></img>
    </div>`);
    $("#galleryContainer").append($image);
    $("#"+imageId+" button").addClass("blue-text"); // the load sequence delays this command
    $("#"+imageId+ " button").click(function (){ alert("Image Liked")});
}

window.onload=function(){
  let $buttonAdder = $("#buttonAdder");
  $buttonAdder.click(click).addClass("blue-text");
}