jQuery file input on change not triggering

Question

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/

user5037156 · Accepted Answer · 2016-01-19 16:16:10Z

6

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.");
    });
});

answered Jan 19, 2016 at 16:16

user5037156

Sign up to request clarification or add additional context in comments.

3 Comments

user5037156 Over a year ago

Could you please explain the downvote? The code works as it is supposed to.

Micaiah Wallace Over a year ago

This works, what's the point of using the $(function() {}); in the script? (p.s. I don't know who downvoted, it wasn't me)

user5037156 Over a year ago

$(function() {}); is just a simplified way of writing out $('document').ready(function(){}); It's best practice to execute trigger events within it to be sure that the document is fully loaded before a user fires the event

Tewdyn · Accepted Answer · 2016-01-19 16:19:41Z

3

It's $('document').ready(function(){}); https://api.jquery.com/ready
You don't need your second function

So:

$(document).ready(function() {

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


});

answered Jan 19, 2016 at 16:19

Tewdyn

7173 silver badges16 bronze badges

1 Comment

Micaiah Wallace Over a year ago

Thanks, I didn't know that on("ready" became deprecated in 1.8, both answers work for me, but Alex answered first

Collectives™ on Stack Overflow

jQuery file input on change not triggering

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related