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

EN

所以我的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。它将发送post到php文件，并创建带有时间戳的php $_SESSION，如果ajax成功，则调用此函数：

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

在php的list_query()函数中，它读取该$_SESSION并对其进行排序。

这里的问题：

但问题是，使用jQuery的.load()函数加载的那些新返回的记录的脚本(单击事件、on事件等等)不起作用。on('event')不起作用，click()不起作用，自定义物化初始化不起作用。甚至不是delegate事件。

我尝试过的：

1)将新的script src标记放在#records目录的末尾，这样它就会再次加载这些脚本-不起作用

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 events或my try #1就可以工作了。但这不是一件好事，但我会试一试。

2)刷新整个站点。天哪，我比这强多了，没人喜欢暴力刷新。

主要问题：有没有针对它的jQuery解决方案，比如一些特殊活动？或者，您是否有更好的想法来实现相同的排序，但使用更好的方法？

如果您不理解某些内容或想要更多代码，请随时对其进行评论。谢谢你的帮助。

编辑：图像示例，展示了它是如何执行和工作的(当你点击它时，它会像这样展开)

​

​