JS scripts not working for divs loaded with jQuery's .load()

So I have div with some php inside. It is executing some records from sql database.

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

I'm using materialize's collapsible for viewing more info of that record. When you click on that one line (record), it expanses just like in materialize's examples.

And I have html select above, where you can choose from which date you wanna return those records.

<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>

Than I have jquery ajax called, when you choose any option. It will send post to php file and creates php $_SESSION with timestamp in it, if ajax is successful this function is called:

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

And in that php list_query() function, it reads that $_SESSION and sort it from that time.

Problem here:
But the problem is, scripts (click events, on events, just anything) for those newly returned records, which were loaded with jQuery's .load() function doesn't work. on('event') doesn't work, click() doesn't work, custom materialize initializations doesn't work. Not even delegate events.

I tried:
1) Putting new script src tag at the end of that #records div, so it will load those scripts again - doesn't work

2) Executing those functions after running .load() - doesn't work

// try #2 example
$('#records').load(document.URL +  ' #records');
$('.collapsible').collapsible(); // doesn't work
$('#records .clickingElement').on('click', function() {/*blah blah*/}) // doesn't work

Possible solutions, which I don't want to do (yet):
1) Get somehow info about those records from that php action file and append it via jQuery, than delegate events or my try #1 would work. But it's not nice thing to do, but I'll try.

2) Refreshing whole site. Pfff, I'm better than that and nobody likes force refreshes.

Main question: Is there a jQuery solution for it, like some special events? Or do you have an better idea how to achieve the same sorting, but with a better way?

If you don't understand something or want more code, feel free to comment about it. Thanks for your help.

Edit: Image example of how it looks executed and working (it expands like this when you click on it)

You need to set your on click function:

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

To this:

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

This makes sure that the event trigger traverses through the entire dom to see if the #records or .clickingElement exist. Instead of it only binding to those elements on load. If that makes any sense.

This has a good answer for you: Click event doesn't work on dynamically generated elements