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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (108)

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

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

我正在使用materialize的可折叠来查看该记录的更多信息。当你单击那一行(记录)时,它就像在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文件并创建$_SESSION带有时间戳的php ,如果ajax成功,则调用此函数:

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

在那个php list_query()函数中,它读取$_SESSION并从那时起对它进行排序。

问题在这里: 但问题是,脚本(单击事件,事件,只是任何事情)为新返回的记录,加载了jQuery的.load()功能不起作用。on('event')不起作用,click()不起作用,自定义物化初始化不起作用。甚至没有delegate事件。

我试过: 1)script src在该#recordsdiv 的末尾添加新标记,因此它将再次加载这些脚本 - 不起作用

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解决方案,就像一些特殊事件?或者你有更好的想法如何实现相同的排序,但有更好的方法?

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

编辑:它看起来如何执行和工作的图像示例(当您单击它时它会像这样扩展)

提问于
用户回答回答于

您需要设置点击功能:

$('#records .clickingElement').on('click', function() {/*blah blah*/}) // doesn't work

对此:

$(document).on('click', '#records .clickingElement', function() {
    /*blah blah*/
});

这可以确保事件触发器遍历整个dom以查看#records或.clickingElement是否存在。而不是仅在加载时绑定到那些元素。如果那有意义的话。

扫码关注云+社区

领取腾讯云代金券