为什么 jQuery 不能在 Ajax 加载的内容中工作？答案

【问题标题】：Why jQuery not working in Ajax loaded content?为什么 jQuery 不能在 Ajax 加载的内容中工作？
【发布时间】：2022-11-15 21:14:06
【问题描述】：

我试图在里面每 X 个小部件框之后插入 div：

#activity-filterable-list .grid .grid

此内容是 BuddyPress 活动，我相信它是在 Ajax 中加载的，因此 jQuery 的启动速度比内容在页面中的加载速度快，什么也找不到，什么也不做。

查询
jQuery(document).ready(function($) {
$('#activity-filterable-list .grid .grid').children(':eq(2)').after('<button>button</button>');
});
HTML
<div id="activity-filterable-list" class="grid-column">
<div class="grid">
<div class="grid">
<div class="widget-box no-padding animate-slide-down ">Box</div>
<div class="widget-box no-padding animate-slide-down ">Box</div>
<div class="widget-box no-padding animate-slide-down ">Box</div>
<div class="widget-box no-padding animate-slide-down ">Box</div>
<div class="widget-box no-padding animate-slide-down ">Box</div>
</div>
</div>
</div>
有没有绕口令？

【问题讨论】：

activity-filterable-list .grid .grid你两次使用同一个类.grid。在您的 HTML 中，您有 id='grid'。改成class="grid"
抱歉，我在创建示例时犯了错误。实际上是阶级。编辑了问题。
您需要监听 ajax 结果事件。如何加载您的内容是此处的相关部分。

标签： php jquery wordpress

【解决方案1】：

我会做这样的事情：

function waitFor(selector, callback) {
  if ($(selector).length) {
    callback();
  }
  else {
    // repeat wait
    setTimeout(function () {
      waitFor(selector, callback);
    }, 100);
  }
}

waitFor('#activity-filterable-list', function() {
  //.. do whatever you want
});

【讨论】：

【解决方案2】：

正如您所说，您希望在每个 X 数量的小部件框之后添加按钮 div。

所以像下面那样做：

var counter = 1;
$('#activity-filterable-list .grid .grid').find('.widget-box').each(function() {
  if (counter % 2 == 0) {
    $(this).after('<button>button</button>');
  }
  counter++;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="activity-filterable-list" class="grid-column">
  <div class="grid">
    <div class="grid">
      <div class="widget-box no-padding animate-slide-down ">Box</div>
      <div class="widget-box no-padding animate-slide-down ">Box</div>
      <div class="widget-box no-padding animate-slide-down ">Box</div>
      <div class="widget-box no-padding animate-slide-down ">Box</div>
      <div class="widget-box no-padding animate-slide-down ">Box</div>
    </div>
  </div>
</div>

注意：当 BuddyPress 活动通过 Ajax 加载此 HTML 时，您需要应用代码。

【讨论】：