将HTML插入到以DOM加载后添加的DIV ID为目标的页面中？

Question

我有一个页面，其中包含一个Modal，当单击每个Modal时，它会从AJAX请求中生成HTML。

在模态注释中可以发布并在其中; s AJAX响应应该在模式HTML中添加新注释...

$(result.html).hide().insertBefore('#addCommentContainer').slideDown();

出于某种原因，它不会在新注释AJAX响应成功时插入HTML。

我认为可能是因为在加载DOM之后添加了#addCommentContainer。

那么知道如何在DOM加载后添加#addCommentContainer时如何在DIV ID #addCommentContainer之后插入HTML？

更新以更好地解释......

1）加载页面并加载DOM

2）发出AJAX请求，向页面添加ID为#addCommentContainer的DIV <div id="addCommentContainer">this div was added to page after the dom was loaded from an AJAX request</div>

3）现在另一个单独的AJAX请求正在尝试向HTML DOM添加注释。 AJAX reuquest对服务器和服务器的POST注释返回成功，并尝试将注释HTML附加到之前在此AJAX请求之前添加到DOM的ID为#addCommentContainer的DIV。

它使用这个jQuery代码，其中result.html包含应添加到DOM的注释HTML：
$(result.html).hide().insertBefore('#addCommentContainer').slideDown();

问题 新注释的HTML不会添加到DOM中。我认为这是因为jQuery无法找到#addCommentContainer，因为它是在加载DOM之后添加的。

通常当我需要使用在DOM加载后添加的元素时，我可以像这样使用document .... $(document).on('click', '#addCommentContainer', function(e){

但是在这种情况下，它不是一个简单的点击事件，而是需要找到该元素，以便它可以向其添加更多的HTML。

Answer 1

您可以在第一个AJAX请求的选项中放置async：false。在我看来，你的第二个请求很可能早于你的第一个请求返回。除非另有说明，否则A​​JAX请求是异步的。更常见的解决方案是将第二个请求放在第一个请求的回调中。

Answer 2

你能不使用ready（）或load（）函数？我相信How can I call a function after an element has been created in jquery?可能包含您想要实现的目标的答案。

Answer 3

更新

尝试在结束$(document).ready(function() {...});标记之前的</body>中包装jQuery，就像通常那样（安全假设）。

然后使用async块上的<script>属性。

示例：

    <script src="https://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.slim.min.js" async></script>
    $(document).ready(function() {
     $(result.html).hide().insertBefore('#addCommentContainer').slideDown();
       ....
    });
   </script>