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

我有一个表单，它显示当前存储在数据库中的图像。检索文件路径后，它将与“Delete”（删除）一起动态加载到表单中，这将允许用户通过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（摘录）：

相反，也可以将AJAX调用更改为简单警报，但没有任何效果

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

---

任何见解都将不胜感激。

似乎您需要绑定到文档而不是单个元素：

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

---

这只是最重要的问题；您的系统可能存在潜在问题。使用Ajax时，它之所以重要，是因为当您更新DOM（删除绑定元素）时，Javascript会丢失它对原始对象的“绑定”，从而阻止它执行所需的更新。从文档中授权可以解决此问题

我已经多次遇到此问题

创建图像后，在while循环中添加click事件

echo "<script>$('#ImageDelete1').click(function(){ DeleteImage1(); });</scipt>";

echo“$（'#ImageDelete1'）。单击（函数（）{DeleteImage1（）；}）；”；

---

希望这有帮助。

Thx感谢您花时间回复Rich，您所说的顶级问题和我的系统的底层问题是什么意思？我有没有办法检查我的系统是否存在问题？（我目前使用的是localhost）我的意思是，尽管我建议的方法在您直接替换有问题的元素时会起作用，但您的系统可能存在更深层次的问题，我还没有意识到这一点。基本上，我只是看到了你的问题&给出了一个对我有无数次作用的答案——但可能还有另一个问题，仅此而已！

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

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

echo "<script>$('#ImageDelete1').click(function(){ DeleteImage1(); });</scipt>";