JS脚本不适用于使用jQuery的.load（）

Question

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

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

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

上面有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 div的末尾放置新的#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事件或我的尝试＃1可以工作。但这不是一件好事，但我会尽力的。

2）刷新整个站点。 Pfff，我比那更好，没有人喜欢强制刷新。

主要问题：：是否有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