JS 脚本不适用于使用 jQuery 的 .load() 加载的 div

Question

所以我的 div 里面有一些 php。它正在执行 sql 数据库中的一些记录。

<div id="records">
  <?php
  list_query(select_records()); // some php returning divs
  ?>
</div>

我正在使用 materialize 的collapsible 来查看该记录的更多信息。当您单击那一行（记录）时，它会像 materialize 的示例一样展开。

我在上面有 html select，您可以在其中选择要返回这些记录的日期。

<form class="ajax" action="action/timeSort.php" method="post">
  <select name="timeSort" class="timeSortSelect">
    <option value="1">Last 24 hours</option>
    <option value="7">Last 7 days </option>
    <option value="30">Last 30 days</option>
    <option value="365">Last 365 days</option>
    <option value="all" selected>Everything</option>
  </select>
</form>

当您选择任何选项时，我调用了 jquery ajax。它会将帖子发送到 php 文件并在其中创建带有时间戳的 php $_SESSION，如果 ajax 成功，则调用此函数：

$('#records').load(document.URL +  ' #records');

在那个 php list_query() 函数中，它会读取 $_SESSION 并从那时起对其进行排序。

这里有问题：
但问题是，那些新返回的记录的脚本（点击事件、事件、任何东西）都用 jQuery 的.load() 函数加载，这些脚本不起作用。 on('event') 不起作用，click() 不起作用，自定义物化初始化不起作用。甚至没有delegate 事件。

我试过了：
1) 将新的 script src 标签放在 #records div 的末尾，这样它将再次加载这些脚本 - 不起作用

2) 在运行 .load() 后执行这些函数 - 不起作用

// try #2 example
$('#records').load(document.URL +  ' #records');
$('.collapsible').collapsible(); // doesn't work
$('#records .clickingElement').on('click', function() {/*blah blah*/}) // doesn't work

可能的解决方案，我不想（目前）：
1) 从该 php 操作文件中获取有关这些记录的某种信息并通过 jQuery 附加它，而不是 delegate 事件或我的尝试 #1 会起作用。但这不是好事，但我会尝试。

2) 刷新整个网站。噗，我比那更好，没有人喜欢强制刷新。

主要问题： 有没有 jQuery 解决方案，比如一些特殊事件？或者您有更好的想法如何实现相同的排序，但使用更好的方法？

如果您不理解某些内容或想要更多代码，请随时发表评论。感谢您的帮助。

编辑： 执行和工作方式的图像示例（单击它时会像这样展开）

Answer 1

你需要设置你的点击功能：

$('#records .clickingElement').on('click', function() {/*blah blah*/}) // doesn't work

到这里：

$(document).on('click', '#records .clickingElement', function() {
    /*blah blah*/
});

这可以确保事件触发器遍历整个 dom 以查看 #records 或 .clickingElement 是否存在。而不是它只绑定到加载时的那些元素。如果这有任何意义。

这有一个很好的答案：Click event doesn't work on dynamically generated elements