jquery - DOM elements and the order in which javascript reads them -
this question has answer here:
- window.onload vs $(document).ready() 13 answers
overview: i'm creating dom elements via javascript , trying access them. problem don't exist in dom (or that's way read it.)
function init(){ pagination(); } window.onload = init; in pagination make create dom element called "more"
var more='<div id="more" class="box move"> > </div>'; this, along other elements displayed in "elements" section of console log. sweet. it's in dom isn't (no).
i tried call div jquery unable to. checked see existed. not.
console.log($("#more").length); i made dummy div in html see if jquery working. checked it's length , yup there.
$(document).ready(function(){ console.log($("#aaa").length); // returns 1 console.log($("#more").length); // returns 0 the question is: best way have jquery read these dom elements?
does window.onload solution clash jquery's $(document).ready statement?
the code 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 + + mydivend; mypagination.innerhtml += radiobuttonstart + + radiobuttonlabelstart + + radiobuttonlabelend + + 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 loop , recalculate */ var lastradio="sss"; console.log(lastradio); }); }); // end jquery
some issues:
the jquery
readycallback triggered beforewindow.onloadcallback. jqueryreadyevent corresponds dom'sdocument.domcontentloadedevent, , dom'sloadevent jquery'sloadevent.you mix jquery , native dom api calls. not problem in itself, if willing use native dom api, why use jquery @ all? or if want use jquery, why still use longer syntax of native dom api?
there seems no reason respond
loadevent; join 2 pieces of code , execute them onready
so, remove line:
window.onload = init; add add call init @ start of ready handler:
$(document).ready(function(){ init(); console.log($("#aaa").length); console.log($("#more10").length); $("#more10").click(function(){ // ... etc. }); }); that way you'll see #more10 found, , click handler works.
