JQuery：如何在 AJAX 出现元素之后追加元素？答案

【问题标题】：JQuery: How to append element after and element appears with AJAX?JQuery：如何在 AJAX 出现元素之后追加元素？
【发布时间】：2020-10-09 13:08:42
【问题描述】：

我有一个通过 AJAX 加载的模式（我无权访问触发此操作的 JS 文件）。

我想使用 JQuery 将一些 HTML 附加到模态框的正文中。

如果我不能简单地在 document.ready 函数中做到这一点。

当另一个元素出现在 DOM 中时，有没有办法附加 HTML？

我试过了

    $('.npopup .description').load(function(){
        $(this).append(message);
    });

和

    $('.npopup .description').ready(function(){
        $(this).append(message);
    });

没有结果。

【问题讨论】：

【解决方案1】：

你可以像这样使用ajaxComplete()：

$( document ).ajaxComplete(function( event, xhr, settings ) {
  if ( settings.url === "ajax/test.html" ) {
    $(this).append(message);
  }
});

请务必查看event、xhr 和settings，以便找到您感兴趣的请求。否则，如果您不使用正文中的if 语句回调，您将在每个 ajax 调用中附加消息。

另一种可能的解决方案是使用 MutationObserver 监听 DOM 中的变化。例如，请参见此处：https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver。

虽然 MutationObserver 是一个更好的解决方案，但我不记得与浏览器的兼容性是什么。总体来说兼容性还是不错的。

【讨论】：