在一个div中添加（然后删除）一个span会导致在单击同一个div中的img时Javascript不会触发。我怎样才能解决这个问题？

作为一个夏季项目，我正在构建一个国际象棋应用程序，它通过在单击棋子或方块时提交jQuery请求来工作。单击一个工件时，请求将返回该工件要移动到的有效方格，然后在该方格上添加一个点，以指示可以将其移动到该方格上（单击一个方格或其他工件后删除该点）。问题是，如果该正方形上已经有一个块，则会添加点，然后当它被删除时，当单击该块时，它将不再触发Javascript。当我刷新页面时，它再次正常工作。我怎样才能修复这个问题，即使在添加和删除一个点时，单击该块也能正确地触发js

这是单击工件时运行的js代码：

$("img.piece").on("click", function(){
if (parent != undefined && parent.attr("class")=="light_square"){
    parent.css("background-color","WhiteSmoke");
    $(".dot").remove();
} else if (parent != undefined && parent.attr("class")=="dark_square") {
    parent.css("background-color","Sienna");
    $(".dot").remove();
}
parent = $(this).parent();
sq_one = $(this).attr("id").slice(5,10);
parent.css("background-color", "Gold");
$.ajax({
    contentType: 'application/json;charset=UTF-8',
    type:'POST',
    url:"/moves",
    data:JSON.stringify({'sq_one':sq_one}),
    success: function(response) {
        for (x in response) {
            var id = "square("+response[x]+")";
            document.getElementById(id).innerHTML += ("<span class=\"dot\"></span>");
        }
    }
    });
});

最后，我使用一个表来制作黑板，html如下所示：

<td id="square({{ 8-x }},{{ y+1 }})" class="light_square">
    <img id="piece({{ 8-x }},{{ y+1 }})" class="piece" src="/static/images/{{ img_dict[(8-x,y+1)] }}">
</td>

尝试使用最小且可复制的代码段。在创建这样一个代码片段时，您可能会自己解决问题，如果没有，您将获得更多来自其他人的响应。欢迎访问。我们很乐意提供帮助，但您首先需要帮助我们，尝试缩小代码的比例，删除与特定问题无关的任何内容。当涉及到在页面UI中解决类似问题时，您的服务器代码对我们来说也是完全无用的。花几分钟通读一遍。然后您可以随时编辑问题以改进或澄清。我猜您需要使用事件委派。谢谢你的建议，我试着缩小我的代码。

<td id="square({{ 8-x }},{{ y+1 }})" class="light_square">
    <img id="piece({{ 8-x }},{{ y+1 }})" class="piece" src="/static/images/{{ img_dict[(8-x,y+1)] }}">
</td>