0

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
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Mayo
  • 369
  • 1
  • 10
  • 24
  • 2
    Where's the code that appends the new node to the DOM? – emerson.marini Jun 01 '16 at 20:56
  • 2
    In regards to your last question: [window.onload vs $(document).ready()](http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready) – emerson.marini Jun 01 '16 at 20:59
  • 1
    I think you answered your own question: http://stackoverflow.com/a/3698214/575199 – Malk Jun 01 '16 at 21:00
  • @4castle -- Yes that error crept in while simplifying the code. I corrected the post. Thx. – Mayo Jun 01 '16 at 21:01
  • `more` is a simple string, not a dom element. try `$(more).find("#more").length` instead; – I wrestled a bear once. Jun 01 '16 at 21:01
  • 1
    Did you add `more` to the DOM? Just creating a HTML string or even node is not going to do it. – trincot Jun 01 '16 at 21:01
  • jQuery turns your `more` string into a dom element when you wrap it in the jquery function `$(more)` however that still does not put the dom element in the body. from there you have to append it to something like.. `$("body").append(more);` – I wrestled a bear once. Jun 01 '16 at 21:04
  • 2
    `$(document).ready()` runs **before** `window.onload`. That's why the element isn't in the DOM yet. – Barmar Jun 01 '16 at 21:11
  • @Barmar -- it appears that way. But it's written after the window.onload. What is a good solution? Put the jquery in another file that is placed below the window.onload file in the HTML? – Mayo Jun 01 '16 at 21:13
  • 1
    Call `pagination` in `$(document).ready()` instead of `window.onload`. Or call all the other jQuery code in `window.onload` after you call `pagination`. – Barmar Jun 01 '16 at 21:14

1 Answers1

2

Some issues:

  • the jQuery ready callback is triggered before the window.onload callback. The jQuery ready event corresponds to the DOM's document.DOMContentLoaded event, and the DOM's load event to jQuery's load event.

  • You mix jQuery and native DOM API calls. This is not a problem in itself, but if you are willing to use the native DOM API, why use jQuery at all? Or if you want to use jQuery, why still use the longer syntax of the native DOM API?

  • There seems no good reason to respond to the load event; you could just join the two pieces of code and execute them on ready

So, remove this line:

window.onload = init;

Add add a call to init at the start of your ready handler:

$(document).ready(function(){ 
    init();
    console.log($("#aaa").length);
    console.log($("#more10").length);
    $("#more10").click(function(){
        // ... etc. 
    });
});

That way you'll see the #more10 is found, and the click handler works.

trincot
  • 317,000
  • 35
  • 244
  • 286