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

Question

这个问题已经有答案了:

Event handler not working on dynamic content [duplicate] (2 个回答)

已关闭 7 年前。

我加载了一个 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 中，则可以使用事件委托(delegate)来避免该问题:

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

您可以将 $(document) 更改为在附加元素期间不会更改的父元素，或者您可以使用 $(document) 迭代所有 DOM事件委托(delegate)时刻的元素。