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

Posted 2023-05-08

【中文标题】JS 脚本不适用于使用 jQuery 的 .load() 加载的 div

【英文标题】：JS scripts not working for divs loaded with jQuery's .load()

【发布时间】：2019-05-15 04:36:33

【问题描述】：

所以我的 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 解决方案，比如一些特殊事件？或者您有更好的想法如何实现相同的排序，但使用更好的方法？

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

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

【问题讨论】：

您需要（重新）设置事件侦听器在新项目被加载/插入到 dom 之后；在 load() 的成功回调中，就在您将它们添加到 dom 之后。

@Jeff 你的意思是我的尝试#2？

那种。它需要在回调函数中：$('#records').load(document.URL + ' #records', function() $('.collapsible').collapsible(); );

load() 是一个异步函数。正如你现在所拥有的那样，collapsible() 将在 load() 完成之前开始。

@Jeff 好吧，我正在测试您所说的内容，并且运行良好。但是当我再次调用这些函数时，它可以执行两次（可能不在那些动态元素上）。我可以取消绑定点击事件，然后用点击事件调用加载函数（这将防止两次或多次执行），但它有效吗？

【参考方案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

【讨论】：

还有更多参考资料可以找到here

请注意，对于性能问题，您最好绑定到最近的非动态元素。只有在没有更好的选择时才绑定到$(document)。

@Jeto 同意 ;)

那是委托事件，正如我在“这里的问题”中已经写过的，它由于某种原因不起作用。

返回的数据是否带有正确的类和与之关联的 id？