は、私はHTMLは次のようにロードされている、動的に作成されたオブジェクト

Question

のために働いていない： - 今、ファイルを選択したときに

if(isset($company_admin)) 
{ 
    $tot_admin = count($company_admin); 
    for($i = 0; $i < $tot_admin; $i++) 
    {?> 
     <div class="form-group col-sm-12"> 
     <label class="col-sm-2">Admin Image <?php if($i > 0) echo ($i+1);?></label> 
     <div class="col-sm-9"> 
      <input type="hidden" name="hid_admin_img[]" id="hid_admin_img<?php if($i > 0) echo '_'.($i+1);?>" value="<?php if(isset($company_admin[$i]['admin_img'])) { echo $company_admin[$i]['admin_img'];} ?>"> 
      <input type="file" name="admin_img[]" id="admin_img<?php if($i > 0) echo '_'.($i+1);?>" class="form-control"></br> 
     <div id="imagePreview3<?php if($i > 0) echo '_'.($i+1);?>"></div> 
     <div id="existImage3<?php if($i > 0) echo '_'.($i+1);?>"> 
     <?php if(isset($company_admin[$i]['admin_img'])) {?> 
      <?php if($company_admin[$i]['admin_img'] != ''){?><img src="<?php echo base_url();?>uploads/admin_org/<?php echo $company_admin[$i]['admin_img'];?>" height="100" width="100"><?php } else {?><img src="<?php echo base_url();?>uploads/new-user-image-default.png" height="100" width="100"><?php } }?> 
     </div> 
     </div> 
    </div> 
    <?php 
    } 
}?> 

、対応するimagePreview3_2、imagePreview3_3 div要素は、プレビューとしてイメージをロードします。

はこれを実現するために、ここでは次のコードです： -

$(function(){ 
for(var i = 2; i<=4; i++) 
{ 
    $("#admin_img_"+i).on("change", function() 
    { 
     var files = !!this.files ? this.files : []; 
     if (!files.length || !window.FileReader) 
       return; // no file selected, or no FileReader support 
     if (/^image/.test(files[0].type)) 
     { // only image file 
      var _this = $(this); 
      alert("huu"); 
      var reader = new FileReader(); // instance of the FileReader 
      reader.readAsDataURL(files[0]); // read the local file 
      reader.onloadend = function(){ // set image data as background of div 
       _this.siblings("div[id^=existImage]").hide(); 
       _this.siblings("div[id^=imagePreview]").show().css("background-image", "url(" + this.result + ")"); 
      } 
     } 
    }); 
} 
}); 

を今は、問題は、このように上昇します。 私は新しい機能を追加しました。特定のボタンをクリックすると、新しいadmin_img_、imagePreview3_、imagePreview3_が動的に追加されます。

これは以下のコードによって行われる：

function append_admin() 
{ 
    var tot_admin = $('#tot_admin').val(); 
    if(tot_admin < 4) 
    { 
     tot_admin = parseInt (parseInt(tot_admin) + 1); 
     $('#tot_admin').val(tot_admin); 


     var admin_image_obj = '<div class="form-group col-sm-12">'; 
      admin_image_obj += '<label class="col-sm-2">Admin_'+tot_admin+' Image</label>'; 
      admin_image_obj += '<div class="col-sm-9">'; 
      admin_image_obj += '<input type="hidden" name="hid_admin_img[]" id="hid_admin_img_'+tot_admin+'" value="">'; 
      admin_image_obj += '<input type="file" name="admin_img[]" id="admin_img_'+tot_admin+'" class="form-control"></br>'; 
      admin_image_obj += '<div id="imagePreview3_'+tot_admin+'"></div>'; 
      admin_image_obj += '</div></div>'; 

     $('#more_admin_container').append(admin_image_obj); 
    } 
} 

しかしながら、動的に作成admin_img_とimagePreview_と、選択された画像のプレビューが動作していません。

私は間違っていますか？

Answer 1

要素は、イベントの割り当て後にDOMに追加された場合、あなたはこの問題を回避するために、イベントの委任を使用することができます。

$(document).on("change", "#admin_img_"+i, function() { 
    }); 

あなたは追加の要素の間に変更されることはありません親要素で$(document)を変更することができますまたは、$(document)を使用して、イベント委任の瞬間にすべてのDOM要素を反復処理することができます。