Question

概述：我正在通过javascript创建DOM元素，然后尝试访问它们。问题是它们不存在于DOM中（或者就是我读它的方式。）

function init(){
    pagination();
}

window.onload = init;

在分页中，我创建了一个名为“more”的DOM元素

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

这与所有其他元素一起显示在控制台日志的“元素”部分中。甜。它在DOM中不是它（不）。

我试图用jQuery调用这个div，但是无法做到。我查看它是否存在。它没有。

console.log($("#more").length);

我在html中创建了一个虚拟div，看看jQuery是否真的有效。我检查了它的长度，是的，它就在那里。

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

问题是：让jQuery读取这些DOM元素的最佳方法是什么？

我的window.onload解决方案是否与jQuery的$(document).ready声明冲突？

代码如下

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

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

window.onload = init;

$(document).ready(function(){

}); // END jQuery

编辑添加整个代码示例

<!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

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

Answer 1

一些问题：

在ready回调之前触发了jQuery window.onload回调。 jQuery ready事件对应于DOM的document.DOMContentLoaded事件，DOM的load事件对应于jQuery的load事件。< / p>
您混合使用jQuery和本机DOM API调用。这本身不是问题，但如果您愿意使用本机DOM API，为什么要使用jQuery呢？或者，如果您想使用jQuery，为什么还要使用原生DOM API的更长语法？
似乎没有充分理由回应load事件;你可以加入这两段代码并在ready

所以，删除这一行：

window.onload = init;

在init处理程序的开头添加对ready的调用：

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

这样您就会看到找到#more10，点击处理程序就可以了。

DOM元素和javascript读取它们的顺序

1 个答案: