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

Question

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>

Dupery

Show us enough code for a complete concise example. – Barchan

Does $('.file-input-hidden').on('change' function() { }); work? – Perceivable

Do you have a reference to the jquery lib? – Resultant

it does, but only for the first element (which is always on the page). any dynamically added elements it doesnt work on – Dupery

Answer 1

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

Barchan

Yes, you're welcome. And now you see why showing the HTML is relevant to a jQuery question. ;-) – Barchan

Answer 2

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

})

Leaflet

I think you missed the whole point of using .on()! See: api.jquery.com/on – Barchan