DOM-Elemente und die Reihenfolge, in der JavaScript sie liest

-1

ÜBERBLICK: Ich erstelle DOM-Elemente über Javascript und versuche dann, auf sie zuzugreifen. Das Problem ist, dass sie in dem DOM nicht vorhanden ist (oder das ist die Art, wie ich es lesen.)DOM-Elemente und die Reihenfolge, in der JavaScript sie liest

function init(){ 
    pagination(); 
} 

window.onload = init;

In Paginierung ich ein DOM-Element „mehr“

var more='<div id="more" class="box move"> > </div>';

Dies genannt machen schaffen, zusammen mit allen anderen Elementen werden im Abschnitt "Elemente" des Konsolenprotokolls angezeigt. Süss. Es ist im DOM, nicht wahr (nein).

Ich versuchte, dieses div mit jQuery zu nennen, konnte es aber nicht. Ich habe nachgesehen, dass es existiert. Es tut nicht.

Ich habe ein Dummy-Div in der HTML-Datei, um zu sehen, ob jQuery tatsächlich funktionierte. Ich habe die Länge überprüft und es war dort.

$(document).ready(function(){ 
    console.log($("#aaa").length); // returns 1 
    console.log($("#more").length); // returns 0

Die Frage ist: Was ist der beste Weg, jQuery lesen Elemente, die diese DOM haben?

Konnte meine window.onload Lösung mit jQuerys $(document).ready Aussage kollidieren?

Der Code ist wie folgt

function initFunction1(){ ...} 
function initFunction2(){ ...} 
... 

function init(){ 
    initFunction1(); 
    initFunction2(); 
} 

window.onload = init; 

$(document).ready(function(){ 

}); // END jQuery

EDIT ADDED GESAMTE 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 unter

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

Quelle

2016-06-01 Mayo

Wo ist der Code, der den neuen Knoten an das DOM anfügt? – melancia

In Bezug auf Ihre letzte Frage: [window.onload vs $ (Dokument) .ready()] (http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready) – melancia

Ich denke, Sie haben geantwortet Ihre eigene Frage: http://StackOverflow.com/a/3698214/575199 – Malk

Einige Fragen:

Der Rückruf jQuery ready wird vor dem Rückruf window.onload ausgelöst. Das Ereignis jQuery ready entspricht dem Ereignis document.DOMContentLoaded des DOM und das Ereignis load des DOM dem Ereignis load von jQuery.
Sie mischen jQuery und native DOM API-Aufrufe. Dies ist an sich kein Problem, aber wenn Sie bereit sind, die native DOM-API zu verwenden, warum sollten Sie überhaupt jQuery verwenden? Oder wenn Sie jQuery verwenden möchten, warum verwenden Sie immer noch die längere Syntax der nativen DOM API?
Es scheint keinen guten Grund zu geben, auf das Ereignis load zu reagieren; Sie könnten nur die beiden Teile des Codes verbinden und sie so auf ready

ausführen, entfernen Sie diese Zeile:

window.onload = init;

Fügen Sie einen Aufruf zu init zu Beginn Ihrer ready Handler hinzu:

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

So wird die #more10 gefunden, und der Click-Handler funktioniert.

Quelle

2016-06-01 21:07:16 trincot

Gemäß der Frage wird dies in der 'pagination()' Funktion getan. – Barmar

Er sagte, es ist in der Rubrik "Elemente". Das zeigt den Inhalt des DOM. – Barmar

Vorhandener Code hinzugefügt, um ihn klarer zu machen. – Mayo

DOM-Elemente und die Reihenfolge, in der JavaScript sie liest

Antwort

Verwandte Themen