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

Question

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

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

我正在使用 Materialise 的 collapsible查看该记录的更多信息。当您单击该行(记录)时，它会像 Materialize 的示例一样展开。

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

<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 事件或我的 try #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 是否存在。而不是仅绑定(bind)到加载时的那些元素。如果这有任何意义的话。

这为您提供了一个很好的答案:Click event doesn't work on dynamically generated elements