neden .on ('change') çalışmıyor?

Question

Sayfanın içine dinamik olarak girdi ekliyorum, bu yüzden bunlara olay eklemek için .on kullanmanız gerekiyor.

Bir change olayına type="file"input eklemeye çalışıyorum, ancak bu işe yaramıyor.

Ben iki yol, ilk denedim:

giriş file-input-hidden bir sınıfa sahip

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

.

ve ikinci:

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

ama hiçbiri yangın dosya input ile değiştirilir/seçildiğinde işlevi.

Neler oluyor?

DÜZENLEME: LINK

ve js:

burada sayfayı görüntülemek

$('.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

Kodunuz ...

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> 

input[type="file"], .container'un içinde olmadığı için çalışmıyor.

div.container içine koy veya böyle bir şey deneyin ..

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

See the documentation for .on().

Answer 2

Eğer sayfa yüklemesinden sonra unsurları ekliyorsanız, değişim yöntemini çağırmalısın Yine, yeni girdi oluşturur ve böyle kullanabilirsiniz kodundan sonra:

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

})