JS腳本不適用於使用jQuery的.load（）加載的div

Question

所以我有一些php里面的div。 它正在從sql數據庫執行一些記錄。

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

我正在使用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並list_query()對其進行排序。

問題在這里：
但是問題是，那些用jQuery的.load()函數加載的新返回記錄的腳本（單擊事件，事件，事件.load()不起作用。 on('event')不起作用， click()不起作用，自定義實現初始化不起作用。 甚至沒有delegate事件。

我試過了：
1）在該#records div的末尾放置新script src標記，因此它將再次加載這些腳本-不起作用

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事件不適用於動態生成的元素