WordPress .click or .on is not working while loaded from function.php

I had this script working before when it was just an inline script on a WordPress page. But now I load it from function.php.

This works fine for my other JavaScript scripts, but .click or .on won't work on this script...

$( "td.event-test" ).on("click",
  function() {
    $("p").empty();
    $(".event-title").empty();
    $(".event-title2").empty();
    $("<h1>EVENT #01</h1>").appendTo(".event-title");
    $("<p>Here is information for event!</p>").appendTo(".event-info");
    $("<p>more info for event</p>").appendTo(".more-event-info");
    $("<p><a>LINK TO EVENT SITE</p></a>").appendTo(".event-link");
    $("a").attr("href", "events");
  }
);

It won't work, and the .click version won't work either:

$( "td.event-test" ).click(
  function() {
    $("p").empty();
    $(".event-title").empty();
    $(".event-title2").empty();
    $("<h1>EVENT #01</h1>").appendTo(".event-title");
    $("<p>Here is information for event!</p>").appendTo(".event-info");
    $("<p>more info for event</p>").appendTo(".more-event-info");
    $("<p><a>LINK TO EVENT SITE</p></a>").appendTo(".event-link");
    $("a").attr("href", "events");
  }
);

It loads the script as I can see console.log printing "test" string from the first line of the JavaScript script.