Search code examples
javascriptjqueryjquery-eventshtml-input

jQuery file input on change not triggering

I have bound two separate events for testing, but for whatever reason neither of them are triggering when I select a file. I'm sure I have just not had enough coffee today but it seems to be the correct way of detecting file selection.

HTML:

<input type="file" id="files">

JS:

$(document).on("ready", function() {

    $("#files").on("change", function() {
        alert("Files changed.");
    });

    $(document).on("change", "#files", function() {
        alert("Files changed.");
    });

});

example: https://jsfiddle.net/snoapps/66y45hjh/

Solution

  • https://jsfiddle.net/66y45hjh/2/

    Your second function was correct but the way the functions are nested wouldn't let it execute the way you wanted it to. Take a look at the edit I made to your fiddle.

    The javascript code I used was as follows.

    $(function() {
    $(document).on("change", "#files", function() {
        alert("Files changed.");
    });
});