Event Binding collides with Loading

Iframe issue

by David Gonzalez

HTML

<div>
            <button id = "buttonAdder">
                Add Button
            </button>
            <label id ="responsesContainer"></label>
            <div id ="buttonContainer">
            
            </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 $editorTooltip = $("#buttonAdder");

        if(!$editorTooltip.length){
          $editorTooltip = $(`<div id='${this.editorTooltipId}' />`);
          $editorTooltip.attr({
            "data-toggle": "popover",
            "data-placement": "bottom",
            "data-content": "No value found."
        });
		$editorTooltip.popover({
		    viewport: this.viewportSelector,
		    html: true,
		    trigger: 'manual',
            template: '<div class="popover" role="tooltip"><div class="arrow"></div><div id = "popoverContent"><div class="popover-content"></div></div></div>'
		});
        }
        $editorTooltip.appendTo('body');
        $("#popoverContent").hover(function() {
        	$(this).addClass("blue-text");
        },
        function() {
        	$(this).removeClass("blue-text");
        }
        );