Jquery .on("change", function() doesn't fire after content is generated

Question

I have a Jquery script which should be fired when a file input changes. It works in a static page, but when content is generated it doesn't respond. Where is my problem?

$("#file_input").on("change", function(){
Code To Execute
});

Answer 1

You need to use event delegation:

$(document).on("change", "#file_input", function() {

Reason being -- these events are bound at run time. If your content isn't there at time, there's nothing to bind to! document in the above example is whatever the container is that has your appended content and also existed at run time.