an example:
router.js script
(function() {
var router = {
home: homeView
}
router.home();
var frontSection = document.getElementById('homeView');
function homeView() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
frontSection.innerHTML = "";
frontSection.innerHTML = xhr.responseText;
}
}
xhr.open('GET', 'views/home-tpl.html#heroText', true);
xhr.send();
}
})();
main.js example script
(function() {
var element = document.getElementById('element') || "";
if(element) {
element.addEventListener('click', function() {
console.log('clicked');
}, false);
}
})();
home partial template
<div id="heroText">
<div id="element"></div>
</div>
index.html here
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- <link rel="stylesheet" href="styles/main.css"> -->
<body>
<div id="homeView" class="container-fluid">
</div>
</body>
<script src="js/router.js"></script>
<script src="js/main.js"></script>
</html>
A simple example as that, now trying to manipulate home template elements after javascript injection into the front section and it would not catch what I targeted.
So, the problem here is, in order to target ‘element’ i’d have to put it either inside ajax successful response call (realy messy), or include additional DOM manipulation script in the bottom of the home.html partial which would not work as those are not evaluated after AJAX call without using eval() on the inline scripts, and inline scripts are a mess.