Paweł
Paweł

Reputation: 1316

jQuery .on('change') function doesn't work on input[type=file]

I have something like that:

$('input[type=file]').on('change', function(){ 
console.log('changed!'); });

and it doesn't work. It works fine on other form elements, but not on input[type=file]. However when I change .on() function to .live() it works fine. I use jQuery 1.8.3 but I want to upgrade to 1.9.0 so there won't be .live() function anymore. Any ideas?

Upvotes: 2

Views: 4140

Answers (3)

THEtheChad
THEtheChad

Reputation: 2432

I have theory:

Are you sure that your selector, $('input[type=file]'), is actually retrieving any elements? If you're dynamically inserting inputs into the DOM, it's quite possible that they don't exist when the selector is being run, and that would explain why .live works.

Try using this bit of code:

$('body').on('change', 'input[type=file]', function(event){
    console.log('Changed!');
});

If it works, you've found your problem... you're selecting elements before they exist and inserting them into the DOM after the code has run.

Upvotes: 1

Kanishka Panamaldeniya
Kanishka Panamaldeniya

Reputation: 17576

also you can try with

$('input:file').on('change', function(event){ 
     console.log('changed!'); 
});

Upvotes: 0

insomiac
insomiac

Reputation: 5664

"On" works fine with jquery 1.8.3. You can try this code and check the demo below which works for me with jquery 1.8.3.

$('input[type="file"]').on('change', function(event){ 
     console.log('changed!'); 
});

Try this : Demo

Upvotes: 5

Related Questions