OVERVIEW: I'm creating DOM elements via javascript and then trying to access them. The problem is that they don't exist in the DOM (or that's the way I read it.)
function init(){
pagination();
}
window.onload = init;
In pagination I make create a DOM element called "more"
var more='<div id="more" class="box move"> > </div>';
This, along with all the other elements are displayed in the "Elements" section of the console log. Sweet. It's in the DOM isn't it (no).
I tried to call this div with jQuery but was unable to. I checked to see it existed. It does not.
console.log($("#more").length);
I made a dummy div in the html to see if jQuery was actually working. I checked it's length and yup it was there.
$(document).ready(function(){
console.log($("#aaa").length); // returns 1
console.log($("#more").length); // returns 0
The question is: what is the best way to have jQuery read these DOM elements?
Does my window.onload
solution clash with jQuery's $(document).ready
statement?
The code is as follows
function initFunction1(){ ...}
function initFunction2(){ ...}
...
function init(){
initFunction1();
initFunction2();
}
window.onload = init;
$(document).ready(function(){
}); // END jQuery
EDIT ADDED ENTIRE CODE SAMPLE
<!doctype html>
<head>
<meta charset="utf-8">
<title></title>
<link rel ="stylesheet" href="pagination3.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div id="aaa">aaa</div>
<div id="pagination"></div>
</body>
<script src="pagination.js"></script>
</html>
// pagination.js below
function pagination(){
var myPagination=document.getElementById("pagination");
var myDivStart='<div class="box">';
var myDivEnd='</div>';
/* */
var first='<div id="first" class="box move"> FIRST </div>';
var last='<div id="last" class="box move"> LAST </div>';
var less='<div id="less1" class="box move"> < </div>';
var less10='<div id="less10" class="box move"> < 10 </div>';
var less100='<div id="less100" class="box move"> < 100 </div>';
var more='<div id="more1" class="box move"> > </div>';
var more10='<div id="more10" class="box move"> 10 > </div>';
var more100='<div id="more100" class="box move"> 100 > </div>';
/* */
var radioButtonStart='<input type="radio" name="pagination" id="radio';
var radioButtonLabelStart='"><label for="radio';
var radioButtonLabelEnd='">';
var radioButtonEnd='</label>';
myPagination.innerHTML = first + less100 + less10 + less;
for(i=640; i<650; i++){
// myPagination.innerHTML += myDivStart + i + myDivEnd;
myPagination.innerHTML += radioButtonStart + i + radioButtonLabelStart + i + radioButtonLabelEnd + i + radioButtonEnd;
}
myPagination.innerHTML += more + more10 + more100 + last;
return myPagination;
}
function init(){
pagination();
}
window.onload = init;
$(document).ready(function(){
console.log($("#aaa").length);
console.log($("#more10").length);
$("#more10").click(function(){
console.log("aaa");
/*
1.get last radio button
2.add ten
3.send to for loop and recalculate
*/
var lastRadio="sss";
console.log(lastRadio);
});
}); // END jQuery