CODEWITHSUNDEEP
jqueryjquery-on
rpsep2
rpsep2

Reputation: 3111

why is my .on('change') not working?

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>

Upvotes: 5

Views: 18258

Answers (2)

Eric Martins
Eric Martins

Reputation: 460

If you are adding elements after page load, you have to call the change method again, after the code that generates the new input, and you can use like this:

$('.file-input-hidden').on("change", function(){

})

Upvotes: 0

Sparky
Sparky

Reputation: 98738

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().

Upvotes: 11

Related Questions