How to execute Javascript in dynamically loaded HTML

Question

I have a webpage in which I dynamically change the HTML in the contentEditor div, depending on what topic the user picks in the navigation menu. The HTML in this contentEditor div gets loaded from external scripts:

function updateContentEditor() {
var window = document.getElementById('contentEditor');

if(editingPage == "Homepagina") {       
    $("#contentEditor").load("http://www.imaginedigital.nl/CMS/Editor/Homepage9.html");
new jscolor.color($line.find('input[name=color]')[0], {});
}
/* and so on... */
}

Now this works perfectly fine, the correct html gets loaded for every page. I do have a problem with Javascript though..

One of the textfields in the script that I have should be a color picker: The color picker works perfectly when I load the page itself in my browser, but when I load this page in my contentEditor div, it does not get loaded:

The color picker is an external Javascript (downloaded from: http://jscolor.com/download.php ).

I already tried loading it in both the main page as the editor page (editor is the one I load inside the main page), but that won't solve the problem either.

Question How do I make sure my Javascript gets executed when I load a page containing that script inside another HTML page's div?

PLEASE NOTE I do have other javascript in the editor that I load inside my main page. that is javascript that shows a pop up div. that works without any problem.

Any help would be highly appreciated!

Answer 1

Have you tried using window.onload=function(){SomeJavaScriptCode}; in the script you are loading?.

Take a look at this, the beforeload is what you might be looking for:

How do you detect that a script was loaded *and* executed in a chrome extension?

Answer 2

you say that it dont load in the contenteditor id ? Please check first -> Are you using jQuery or Pure JS

function updateContentEditor() {
var window = document.getElementById('contentEditor');

if(editingPage == "Homepagina") {       
    $("#contentEditor").load("http://www.imaginedigital.nl/CMS/Editor/Homepage9.html");
}
/* and so on... */
}

From your code you are mixing Pure JS and jQuery + dont know are you using jQuery or not

document.getElementById('contentEditor'); -> Pure JS
$("#contentEditor").load("http://www.imaginedigital.nl/CMS/Editor/Homepage9.html"); -> jQuery

If you are not using jQuery -> $("#contentEditor").load("http://www.imaginedigital.nl/CMS/Editor/Homepage9.html"); -> jQuery $("#contentEditor").load("http://www.imaginedigital.nl/CMS/Editor/Homepage9.html"); -> jQuery will not work