Question

我有一个像这样的HTML： -

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元素。

On Change函数不适用于动态创建的对象

1 个答案: