.单击“不为动态加载的表单工作”

我有一个表单，它显示当前存储在数据库中的图像。检索文件路径后，它将与"Delete"<button>一起动态加载到表单中，这将允许用户通过AJAX调用删除图像。

我目前能够成功加载图像和按钮，但按钮不会在单击时调用ajax函数。

我正在父容器上使用.on('click')，但它仍然不起作用。

jQuery Code(Extract):
$('#ItemDetailsContainer').on('change',function(){
    // Deletes Existing pics
    $('#ImageDelete1').on('click',function(){
        DeleteImage1();
    });
});

AJAX函数的代码：

function DeleteImage1() {
    var itemid=$('#ImageDeleteItemID2').val();
    var filepath=$('#ImageDeleteFilePath2').val();
    $.ajax({
        url:"deleteitempic.php",
        type:"POST",
        data:"ItemID="+itemid+"&FilePath="+filepath,
        success:function(){
            alert("Image successfully deleted.");
        },
        error:function(){
            alert("Image could not be deleted due to an error.");
        }
    });
};

HTML（摘录）：

<form id='BizEditItem' name='BizEditItemDetails' method='post' action='edititemprocess.php' enctype='multipart/form-data' novalidate='novalidate'>
    <div class='BizEditItemDetail'>
        <label for='BizEditItemCat'>Category:</label>
        <select class='BizEditItemInput' id='BizEditItemCat' name='BizEditItemCat'></select>
        <span></span>
    </div>
    <div class='BizEditItemDetail'>
        <label for='BizEditItemSubCat'>SubCategory:</label>
        <select class='BizEditItemInput' id='BizEditItemSubCat' name='BizEditItemSubCat'></select>
        <span></span>
    </div>
    <div class='BizEditItemDetail'>
        <label for='BizEditItemOld'>Item:</label>
        <select class='BizEditItemInput' id='BizEditItemOld' name='BizEditItemOld'></select>
        <span></span>
    </div>
    <div id='ItemDetailsContainer'>
    </div>
</form>

动态加载部件（摘录）：

echo"<div class='BizAddItemDetails' >";
//Counter variable to track images displayed
$imgdisplayed=1;
while($getimage=$fetchimg->fetch(PDO::FETCH_ASSOC)) {
    $filepath=$getimage['FilePath'];
    echo"<label for='BizEditItemFile1'>Upload Image &nbsp &nbsp&nbsp&nbsp(Max Size:2MB)</label>";
    echo"<input type='file' class='BizEditItemInput' id='BizEditItemFile$imgdisplayed' name='BizEditItemFiles[]' />";
    echo"<span></span>";
    echo"<br>";
    echo"<img id='"ImagePreview$imgdisplayed'" name='"ImagePreview$imgdisplayed'" class='ImagePreview' src='"$filepath'" > ";
    echo"<input type='hidden' name='"ImageDeleteItemID$imgdisplayed'" value='"$itemid'">";
    echo"<input type='hidden' name='"ImageDeleteFilePath$imgdisplayed'" value='"$filepath'" >";
    echo"<input type='button' id='"ImageDelete$imgdisplayed'" name='"ImageDelete$imgdisplayed'" class='ImageDeleteButton' value='Delete Picture'>";
    echo"name='"ImageDelete$imgdisplayed'"";
    $imgdisplayed++;
}
while($imgdisplayed<=3) {
    echo"<label for='BizEditItemFile1'>Upload Image</label>";
    echo"<input type='file' class='BizEditItemInput' id='BizEditItemFile$imgdisplayed' name='BizEditItemFiles[]' />";
    echo"<span></span>";
    echo"<br>";
    echo"<img id='"ImagePreview$imgdisplayed'" name='"ImagePreview$imgdisplayed'" class='EmptyImagePreview' > ";
    echo"<br>";
    $imgdisplayed++;
}
echo"</div>";

尝试过的事情：

我试过使用

$('#ImageDelete1').click(function(){
    DeleteImage1();
});

相反，以及将AJAX调用更改为一个简单的警报，但什么都不起作用。

在服务器错误日志和chrome控制台中也没有任何错误。

任何见解都将不胜感激。