tại sao .on ('thay đổi') của tôi không hoạt động?

Question

Tôi đang thêm đầu vào động vào trang của mình, vì vậy cần sử dụng .on để đính kèm sự kiện vào chúng.

Tôi đang cố gắng đính kèm sự kiện change vào type="file"input, nhưng nó không hoạt động.

Tôi đã thử hai cách, là người đầu tiên:

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

nơi đầu vào có một lớp của file-input-hidden.

và thứ hai:

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

nhưng không phải lửa chức năng khi một tập tin được chọn/thay đổi với sự input.

Có gì không ổn?

EDIT:

xem các trang ở đây: LINK

và 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

Mã của bạn ...

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> 

Không hoạt động vì input[type="file"] không phải là bên trong trong số .container.

Đặt nó bên trong div.container hoặc thử một cái gì đó như thế này ..

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

See the documentation for .on().

Answer 2

Nếu bạn đang thêm các yếu tố sau tải trang, bạn phải gọi phương thức thay đổi một lần nữa, sau khi mã để tạo đầu vào mới, và bạn có thể sử dụng như thế này:

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

})