Fatal编程技术网
  • javascript/
  • Javascript 访问通过其他脚本插入的HTML元素

Javascript 访问通过其他脚本插入的HTML元素

javascript dom

Javascript 访问通过其他脚本插入的HTML元素,javascript,dom,Javascript,Dom,感谢BABYLONjs，我正在开发一个图形界面，我决定实现一个模式选择功能，这意味着您可以选择编辑模式或可视化模式。这两种模式都有不同的HTML组件，因此我选择编写一个构造脚本，通过实现与所选模式对应的正确元素来创建HTML。让我们将A.js称为构建脚本，将B.js称为我的主脚本和所有功能 当我在B.js中尝试获取一个HTML元素（如通过a.js插入的按钮）时，返回值为null（我获取的元素是document.getELementById（'element'） 我确保在我的HTML中在B.js之

感谢BABYLONjs，我正在开发一个图形界面，我决定实现一个模式选择功能，这意味着您可以选择编辑模式或可视化模式。这两种模式都有不同的HTML组件，因此我选择编写一个构造脚本，通过实现与所选模式对应的正确元素来创建HTML。让我们将A.js称为构建脚本，将B.js称为我的主脚本和所有功能

当我在B.js中尝试获取一个HTML元素（如通过a.js插入的按钮）时，返回值为null（我获取的元素是document.getELementById（'element'）

我确保在我的HTML中在B.js之前包含A.js，所以我真的不明白为什么它不起作用

如果你需要更高的精确度，请随时询问。
谢谢！

请确保两个javascript文档都附加到同一个HTML文件，以便
文档
引用相同的内容

还要确保所做的一切都是同步的。例如，如果使用的是
window.addEventListener（'onload'）
这是异步的。这意味着该代码实际上没有运行，而是在等待一点来运行自己。同时，它可能会决定运行您的B.js代码，此时您选择的元素还不存在

如果这就是问题所在，那么也可以在
窗口中运行B.js脚本。addEventListener（'onload'）

第三件事是A.js脚本可能在函数中，为了将元素添加到DOM中，需要运行该函数

如果没有实际的代码，就很难调试您提出的特定问题。如果您需要更好的答案，请包含实际的演示代码，以便我们能够更好地识别问题

编辑：代码发布

正如您所发布的，在您的代码中，您定义了构造函数，但随后告诉broswer在加载窗口时运行它。然后在调用构造函数之前运行A.js。有两种解决方案

在
窗口中包装整个B.js。添加EventListener（“加载”）
，或者做一些完全不同的事情

在A.js之前包含B.js，并定义一个名为B（）的函数。将所有代码放在其中。然后，在构造函数的末尾调用B（）。这意味着B.js也将被迫等待窗口加载。我希望这会有所帮助！

以下是我想做的一个示例：

HTML:

 <!DOCTYPE html>
<html>

<head>
<title> Test </title>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
</head>
<body id=inserthere>
  <header> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <!-- <script style="text/javascript" src="a.js" defer></script> --> 
      <!-- <script style="text/javascript" src="b.js" defer></script> -->
   <header>
</body> 
</html>
这些都是试图重现我的情况的简短示例，希望能对您有所帮助！

我知道您使用jQuery。如果您想捕获动态创建的元素上的事件，您应该绑定到父元素（或文档）：

请添加一个最小的代码示例，以便我们能够帮助发现任何错误；-）done@Magix！希望能对你有所帮助我已经发布了几行代码来帮助你理解，而且可能与窗口有关。addEventListener（“load”），正如你刚才所说，我知道我把一些基本的js和一些jquerry混为一谈，这可能不是很干净，但当我没有真正专注于我写的东西时，它就会发生。如果你决定保留它，我的解决方案应该对你有帮助。我应该在哪里申报？在A.js或B.js中？没关系。哦，好吧，对不起，我不太明白你的答案，但现在我明白了，而且它工作了！非常感谢您抽出时间：） 
function construction(){

$("#inserthere").append("<button id='testone' class='btn'> 1 </button>");
$("#inserthere").append("<button id='testtwo' class='btn'  > 2</button>");

}

window.addEventListener("load", construction);

var test1 = document.getElementById("testone");
test1.addEventListener("click", function(){
alert("clicked");
});

var test2 = document.getElementById("testtwo");
test2.addEventListener("dblclick", function(){
alert("doubleclicked");
})

$(document).ready(function() {
   $(document).on("click","#testone",function() {
       alert("clicked");
   });
}