I'm trying to attach an event handler to dynamically added elements (i.e. rows that are added to a table), and the best practice is to use JQuery event delegation using on(). However, I can't seem to get it working. Below is the code:

$(document).ready(function() {

    $('.fileuploader').on('change', function() {
        // works fine
    });

    $(document.body).on('change', '.fileuploader', function() {
        //does not work
    });

});

What is more strange is that this only seems to be an issue with the file upload field. If I use ".singleline" as the selector, both event handler blocks work.

To reproduce, simply create a new form with a table, and make one of the fields inside the table a file upload field. Add some console.log statements into each block and then go to the form and add a file. You should see that only one of the blocks run.