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，您可以在其中选择要从哪个日期开始 return 那些记录。

<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 并从那个时间开始排序。

问题在这里：
但问题是，那些新 returned 记录的脚本（点击事件、on 事件，任何东西）用 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) 刷新整个站点。 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

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

JS scripts not working for divs loaded with jQuery's .load()

javascript

php

jquery

jquery-load

materialize