Html生成的JavaScript无法与其他JavaScript一起使用

Html generated JavaScript not working with other JavaScript

本文关键字：JavaScript 其他 一起 Html      更新时间：2023-09-26

嗨，我有一个由JavaScript生成的html。我还有另一个单独的JavaScript，它假设隐藏该html并对其执行其他操作。问题是html没有响应任何其他javascript的函数或方法。

我试着在Javascipt中包含Javascript，但这似乎不起的作用

HTML

<head>
     <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
    <script src = "js/java1.js"type="text/javascript"></script>
    <script src = "js/java2.js"type="text/javascript"></script>
</head>
<body id = "example">
</body>

Javascript1

function creatething(){
    var html ='';
    html += '<div id = "button">Button <div id = "hide"> EXAMPLE </div> </div>'
    return html;
}
function insertHTML(id, html) {
    var el = document.getElementById(id);
    if(!el) {
        alert('Element with id ' + id + ' not found.');
    }
    el.innerHTML = html;
}
function run() {
    var html = creatething();
    insertHTML('example', html);
}
window.onload = run;

Javascript2

$(document).ready(function() {  
    $('#hide').hide();
});

问题是事件的顺序。

window.onload = run;  <-- Creates button
$(document).ready(function() {  <-- hides button

Document Ready在加载前启动。您可以在加载时添加元素，并在就绪时隐藏它。

这就像在做披萨之前先吃披萨

如果您可以选择将JavaScript添加到文件中，或者在加载选项卡之前将其注入（例如浏览器插件），那么您可以使用

  document.onreadystatechange = function () {
    if(document.readyState === 'interactive') {
      alert('interactive');
    }
    if(document.readyState === 'complete') {
      alert('complete');
    }
  }

从MDN，"在加载文档时返回"loading"，在完成解析但仍在加载子资源时返回"interactive"，在加载后返回"complete"。"

相关文章：