Получите событие готовности после добавления HTML-кода. ⇐ Jquery

[Anonymous]

У меня есть следующий jsfiddle
https://jsfiddle.net/3qge41b0/

Код: Выделить всё

$('#myP').click(function() {
GetMap();
});

function GetMap() {
var text = '         .map { height: 400px;  width: 100%; }       OpenLayers example        My Map       function LoadMap() { var map = new ol.Map({ target: "map", layers: [new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 10}) }); console.log(map) }; $(function() { LoadMap() });  ';

$("#myDIV").html(text);

}

$('#myP2').click(function() {
GetMap2();
});

function GetMap2() {
var text = '         .map { height: 400px;  width: 100%; }       OpenLayers example        My Map       function LoadMap() { var map = new ol.Map({ target: "map", layers: [new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 10}) }); console.log(map) }; setTimeout( function() { LoadMap() }, 10);  ';

$("#myDIV").html(text);

}

Код: Выделить всё

My Web Page

Click me.
Or Click me.

This is a div element.

Код: Выделить всё

    $('#myP').click(function() { GetMap(); });

function GetMap()
{
var text = '         .map { height: 400px;  width: 100%; }       OpenLayers example        My Map       function LoadMap() { var map = new ol.Map({ target: "map", layers: [new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 10}) }); console.log(map) }; $(function() { LoadMap() });  ';

$("#myDIV").html(text);

}

$('#myP2').click(function() { GetMap2(); });

function GetMap2()
{
var text = '         .map { height: 400px;  width: 100%; }       OpenLayers example         My Map       function LoadMap() { var map = new ol.Map({ target: "map", layers: [new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([37.41, 8.82]), zoom: 10}) }); console.log(map) }; setTimeout( function() { LoadMap() }, 10);  ';

$("#myDIV").html(text);

}

Как вы можете видеть, это всего лишь элемент div, который динамически загружается с помощью строки HTML.
Проблема в том, что первая кнопка приводит к ошибке, потому что файл ol. js, похоже, не загружается. Если я вставлю тайм-аут, это сработает (GetMap2). Также, если вы нажмете первую кнопку во второй раз.
Но я считаю, что это скорее обходной путь, чем решение. Что делать, если соединение медленное и загрузка библиотеки занимает более 100 мс?
Есть ли возможность получить событие при загрузке библиотеки? Я пробовал много разных способов добавления или добавления строки html. Ничего не помогло. Событие готовности или загрузки в ol.js срабатывает неправильно.
Есть ли у кого-нибудь идеи, как это решить?

Подробнее здесь: https://stackoverflow.com/questions/572 ... -html-code