jQuery's on does a lot, but for your specific case, you want to put "on" onto a DOM object that is not loaded up after the DOM has loaded. This allows the event to bubble up to this DOM object which, then, in turn, delegates the event to the appropriate DOM item based on the second selector your provide.
If you follow the link above, there is a ton of information about it in the jQuery documentation. Specifically, this is important for your case...
Event handlers are bound only to the currently selected elements; they
must exist on the page at the time your code makes the call to .on().
To ensure the elements are present and can be selected, perform event
binding inside a document ready handler for elements that are in the
HTML markup on the page. If new HTML is being injected into the page,
select the elements and attach event handlers after the new HTML is
placed into the page. Or, use delegated events to attach an event
handler, as described next.
In any case, you need to bind to the thing that already exists, and provide a second selector for the thing that is going to be added that you want to have the actual event, along with the event, and the functionality. Something like this...
$('#selector-to-thing-that-exists').on('click', '.thing-that-will-be-added-later', function() {
alert('Do stuff here!');
});
Note that it is important that the "thing that exists" is as low as you can possibly get it in the DOM for efficiency. For example, it is not preferable to put the selector on the 'body' or at the document level. Keep this in mind.
Hopefully this gives a bit of a better understanding for what you want to do. I highly encourage you to read the jQuery documentation as it is very good.