所以我的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。它将发送post到php文件,并创建带有时间戳的php $_SESSION
,如果ajax成功,则调用此函数:
$('#records').load(document.URL + ' #records');
在php的list_query()
函数中,它读取该$_SESSION
并对其进行排序。
这里的问题:
但问题是,使用jQuery的.load()
函数加载的那些新返回的记录的脚本(单击事件、on事件等等)不起作用。on('event')
不起作用,click()
不起作用,自定义物化初始化不起作用。甚至不是delegate
事件。
我尝试过的:
1)将新的script src
标记放在#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
events或my try #1就可以工作了。但这不是一件好事,但我会试一试。
2)刷新整个站点。天哪,我比这强多了,没人喜欢暴力刷新。
主要问题:有没有针对它的jQuery解决方案,比如一些特殊活动?或者,您是否有更好的想法来实现相同的排序,但使用更好的方法?
如果您不理解某些内容或想要更多代码,请随时对其进行评论。谢谢你的帮助。
编辑:图像示例,展示了它是如何执行和工作的(当你点击它时,它会像这样展开)
发布于 2018-12-14 06:22:46
你需要设置你的点击功能:
$('#records .clickingElement').on('click', function() {/*blah blah*/}) // doesn't work
要这样做:
$(document).on('click', '#records .clickingElement', function() {
/*blah blah*/
});
这确保了事件触发器遍历整个dom,以查看#记录或.clickingElement是否存在。而不是只在加载时绑定到这些元素。如果这有任何意义的话。
这里有一个很好的答案:Click event doesn't work on dynamically generated elements
https://stackoverflow.com/questions/53770703
复制相似问题