warum ist meine .auf('ändern') funktioniert nicht?

Ich bin das hinzufügen von Eingaben dynamisch in meine Seite, so verwenden müssen .on auf Ereignisse anfügen, um Sie.

Ich versuche anzuhängen change Veranstaltung zu einem type="file" input, aber es funktioniert einfach nicht.

Habe ich versucht, zwei Möglichkeiten, die erste:

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

wo der Eingang hat einen Klasse file-input-hidden.

und die zweite:

$('.container').on('change', 'input[type="file"]' , function(){

aber weder Feuer der Funktion, wenn Sie eine Datei ausgewählt/geändert werden, mit der input.

Was mache ich falsch?

EDIT:

anzeigen der Seite hier: LINK

und 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>

InformationsquelleAutor rpsep2 | 2013-02-10