I'm adding inputs dynamically into my page, so need to use .on
to attach events to them.
I'm trying to attach a change
event to a type="file"
input
, but it's just not working.
I've tried two ways, the first:
$('.container').on('change', '.file-input-hidden' , function(){
where the input has a class of file-input-hidden
.
and the second:
$('.container').on('change', 'input[type="file"]' , function(){
but neither fire the function when a file is selected/ changed with the input
.
What's going wrong?
EDIT:
view the page here: LINK
and js:
$('.container').on('click', '.file-browse' , function(){
var thisone = $(this).attr('id');
$('input[name="input-'+ thisone+'"]').click();
});
$('.file-input-hidden').on('change', function(){
var thetext = $(this).val();
var thetextsplit = thetext.split('\\').pop();
var thisone = $(this).attr('name').split('-').pop();
if($('.file-info').text() == thetextsplit){
alert('you have already selected this file');
$(this).replaceWith( $(this).val('').clone( true ) );
}
else{
$('#info-'+ thisone).text(thetextsplit);
$('#clear-'+ thisone).fadeIn(100);
var emptyinputs = $('.file-info:empty').length;
if(emptyinputs <1){
var filledinputs = $(".file-info:contains('.')").length;
var thisnumber = filledinputs + 1;
var filecontainer = $('<div>').addClass('file-container');
var fileinfo = $('<div>').addClass('file-info').attr('id','info-file'+thisnumber);
var filebrowse = $('<div>').addClass('file-browse').attr('id','file'+thisnumber).text('Browse');
var fileclear = $('<div>').addClass('file-clear').attr('id','clear-file'+thisnumber).text('X');
var newinput = $('<input>').attr({'type':'file','name':'input-file'+thisnumber}).addClass('file-input-hidden');
var thebody = $('.container');
(filecontainer).append(fileinfo,filebrowse,fileclear);
filecontainer.appendTo(thebody);
var theform = $('#hidden-inputs');
newinput.appendTo(theform);
}
}
if($(this).val() == ''){
$('#clear-'+thisone).fadeOut(100);
}
});
$('.container').on('click', '.file-clear' , function(){
var thisone = $(this).attr('id').split('-').pop();
$('input[name="input'+ thisone +'"]').replaceWith( $('input[name="input'+ thisone +'"]').val('').clone( true ) );
$('#info-'+ thisone).text('');
$(this).fadeOut(100);
});
HTML:
<div class="container">
<div class="file-container">
<div class="file-info" id="info-file1"></div>
<div class="file-browse" id="file1">Browse</div>
<div class="file-clear" id="clear-file1">X</div>
</div>
</div>
<form action="" method="POST" enctype="multipart/form-data" id="hidden-inputs">
<input type="submit" style="clear:both; float:left;"/>
<input type='file' name="input-file1" class="file-input-hidden" />
</form>
Definition and Usage The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus, after the content has been changed.
The change() method triggers the change event, or attaches a function to run when a change event occurs. Note: For select menus, the change event occurs when an option is selected. For text fields or text areas, the change event occurs when the field loses focus, after the content has been changed.
Your code...
jQuery:
$('.container').on('change', 'input[type="file"]' , function(){
HTML:
<div class="container">...</div>
<form>
<input type='file' name="input-file1" class="file-input-hidden" />
</form>
It's not working because input[type="file"]
is not inside of .container
.
Put it inside the div.container
or try something like this..
$(document).on('change', 'input[type="file"]' , function(){
See the documentation for .on()
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With