Ajax DOM Holder完成加载后如何运行Jquery？答案

【问题标题】：How to run Jquery after Ajax DOM Holder complete loading?Ajax DOM Holder完成加载后如何运行Jquery？
【发布时间】：2017-12-09 00:03:31
【问题描述】：

我的页面有两个标签；其中一个随机将处于活动状态，默认情况下将加载其日期。第二个选项卡将处于非活动状态，直到用户单击它，然后它将使用 Ajax 加载内容。（尚未加载）

我需要做的就是在两个选项卡中触发此代码：

$('#listings').attr('class', 'mobile row');

但我无法让它在非活动选项卡中运行，因为 JQuery 总是在 Ajax 完成加载之前停止。

这是标签页的 HTML 代码：

<ul class="tabs tabs-hash">
  <li class="" id="tab_listings" lang="listings">
    <a href="#listings" data-target="listings">Property</a>
  </li>
  <li class="active" id="tab_automobile" lang="automobile">
    <a href="#automobile" data-target="automobile">Vehicles</a>
  </li>
</ul>

这是点击每个选项卡时显示的内容：

标签#1（活动）

<div class="tab_area" id="area_automobile" style="display: block;">
  <section id="listings" class="mobile row">
    some content here
  </section>
</div>

标签#2（非活动）

<div class="tab_area hide" id="area_listings" style="display: none;">
    <span class="text-notice">**Loading...** </span><!-- This span is loading content using Ajax and JQuery finish before its complete and this content will have new section with the target class need to be changed by Jquery -->
</div>

一旦 Inactive 选项卡变为 Active 并且 Ajax 完成加载

此部分将出现，class="mobile row" 需要更改

  <section id="listings" class="mobile row">
    some content here
  </section>

我尝试搜索 Stack Overflow，但我找到的所有帖子都没有解决我的问题。

有人可以解释实现目标的方法吗？

【问题讨论】：

第二个标签有单独的id吗？
什么是#listings？选项卡 ID 还是元素？
@Carl Edwards 谢谢，我用标签页 HTML 代码更新了帖子。
@Colin Cline #listing 是我需要更改其类的其他 div。及其非活动/活动选项卡的一部分......它是网格/列表视图......当您单击每个选项卡时，它将调用它的视图
这对你不起作用？ Tbh 我对你想在这里实现的目标有点困惑$('#listings', '#automobile').attr('class', 'mobile row');

标签： javascript jquery dom jquery-events mutation-observers

【解决方案1】：

经过深度搜索，我在mozilla.org找到了我想要的解决方案

那里详细解释了，但简短的摘要是实例化新的 DOM 突变观察器的方法，与所有新的主要浏览器兼容。

所以，如果 DOM 类、id、属性等……会出现在未来 MutationObserver 会检测到它并应用规则（我们可以随时停止它 strong>) 及其支持：

子元素目标的
属性目标的
数据目标的后代
属性值
突变前的数据（过去/旧数据）
本地名称（无命名空间）

我用来完成上述目标的代码如下：

var observer = new MutationObserver(function(mutations) {
 mutations.forEach(function(mutation) {
  if (!mutation.addedNodes) return
  for (var i = 0; i < mutation.addedNodes.length; i++) {
   $('section#listings').attr('class', 'mobile row');
   var node = mutation.addedNodes[i]
  }
 })
})
 observer.observe(document.body, {
  childList: true
  , subtree: true
  , attributes: false
  , characterData: false
 })

我希望这可以帮助其他人，对我来说这是目前最好的解决方案，除非其他人给我额外的帮助和更好的建议。

注意： 不幸的是，上面的代码取自 Stackoverflow 的一篇文章，我错误地关闭了浏览器的选项卡，即使在 Google 上搜索也无法找回帖子。我希望我能将这段代码归功于顾问，我应该感谢 StackOverFlow 和代码制作者。

编辑：我更改了 Class attr。代码如下：

$('section.list').attr('class', 'mobile row');

由于我的页面包含 3 个具有相同 #ID 的部分，这会导致 JQuery 在找到 ID 匹配但不与类匹配后停止塔里克

【讨论】：