Javascript：如何等待元素存在于 DOM

Question

我是新手 Javascript，我正在尝试编写一个“简单”的电子商务代码。

事实是，每当添加新商品时，我都会出现一个购物车（从侧面滑动），并且在购物车内部，该商品用如下所示的容器表示：

除了一件事，一切都完美无缺。

由于元素是由用户添加到购物车中的，它们之前并不存在于购物车中，而且我的代码无法在购物车出现之前获取按钮，因此它们最终为“null”。

为了让购物车按钮正常工作，我必须重新加载页面，这样它们就已经存在了（因为我正在使用本地存储，因此 DOM 重新加载已经存在的元素，现在它可以找到按钮了）

有什么方法可以让我的代码等待元素添加到购物车并出现在 DOM 中，然后才检索它们？

既然要附加到这个post，我把存储库留给你，你可以看看（唯一重要的东西在文件夹“CATALOGO”> products.html / /文件夹“assets/js”>“catalogo.js”：

Github Code Repository

代码有点乱，因为我一直在来回修补和重试一堆东西来实现它，但没有结果。（EventListener DOMContentLoaded 也不起作用，因为 dom 已加载，但购物车中的元素仍然不存在）

（我不是在寻找 setTimeOut 之类的解决方案）我以为我可以使用 Selenium，但我必须使用 node，我只想用 JS 来做。

Answer 1

为什么不在购物车中添加商品后才尝试获取这些按钮？

Answer 2

我在 phone 上，无法检查您的代码，但根据您提供的详细信息，您需要捕获输入气泡（因为无法直接定位动态创建的按钮）

为此，将您的事件处理程序放在已经且无需用户输入的元素上，例如上部 div... 当用户单击按钮，事件将冒泡到 div，您可以在那里捕获它。

你说你是 Javascript 的新手，所以如果你不熟悉这个概念 Google 搜索“Javascript 事件冒泡”，那里有很多很棒的文章.

编辑：如果您想查看，我创建了一个非常基本的示例，只需将其另存为 HTML 文件并在浏览器中打开即可。

<html>
<body>
    <div>
        <button id="addBtn">Add New Button</button>
    </div>
    
    <div id="newBtnContainer"></div>
</body>
</html>


document.getElementById('addBtn').onclick = function() {
    var btn = document.createElement('button');
    var btnText = document.createTextNode("Dynamically Created Button");
    btn.appendChild(btnText);
    document.getElementById('newBtnContainer').appendChild(btn);
}

document.getElementById('newBtnContainer').onclick = function() {
    alert('Found the button!');
}

希望这对您的用例有所帮助谢谢

Javascript：如何等待元素存在于 DOM

Javascript: How to wait until an element exists in DOM

javascript

dom

dom-events