dlaczego moje .on ("zmiana") nie działa?

Question

Dodaję wejścia dynamicznie do mojej strony, więc trzeba użyć .on, aby dołączyć do nich zdarzenia.

Próbuję dołączyć wydarzenie change do type="file"input, ale po prostu nie działa.

Próbowałem dwa sposoby pierwszego:

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

gdzie wejście ma klasę file-input-hidden.

a drugi:

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

ale ani ogień funkcja, gdy plik jest zaznaczony/zmieniane z input.

Co się dzieje źle?

EDIT:

wyświetlić stronę tutaj: LINK

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

Answer 1

Kod ...

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> 

Nie działa, ponieważ input[type="file"] nie jest wewnątrz z .container.

umieścić go wewnątrz div.container lub spróbuj coś takiego ..

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

See the documentation for .on().

Answer 2

Jeśli dodajesz elementy po stronie obciążenia, musisz zadzwonić do metody zmiany ponownie po kodzie, który generuje nowe wejście i można wykorzystać tak:

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

})