Javascript .on（'；单击'；）仅工作一次

我试图用不同的颜色块填充一个div，为此，我有一个带有

的HTML，以及以下javascript代码：

// I want field to be globally accessible 
var field;
var colors;
$(document).ready(function(){
 field = [[],[],[],[],[],[],[],[],[]];  
 colors =["black","yellow","blue","green","grey","brown"];          
fillField();            


$(".tile").on('click', function(){
console.log("sfadfd");
var x = this.getAttribute("data-x");
var y = this.getAttribute("data-y");
console.log("X: "+x+", Y: "+y);
tileClicked(x,y);
});

});

var tileClicked = function(x,y){
console.log(colors[field[y][x]]);
field[y][x] = 0;
showField();

};

// Displays the field into a neat grid with pretty colors
var showField = function(){
console.log("Test");

$(".tile").remove();

    for (var i = 0; i<field.length; i++){
        for (var j = 0; j<10; j++){
            var color = colors[field[i][j]];

            $("#field").append("<div data-x="+j+" data-y="+i+" class=tile style=background-color:"+color+" ></div>");

            }
console.log("Test3");
            }
}

// Fills empty slots in the field
var fillField = function(){
    for (var i = 0; i<field.length; i++){
        for (var j = 0; j<10; j++){
        var next = Math.floor(Math.random()*5+1);

        if(next == field[i][j-1] ){
        field[i][j] = Math.floor(Math.random()*5+1);
        }
        else { field[i][j] = next;}
        }
    }
showField();
}

//我希望字段可以全局访问
var场；
变异颜色；
$（文档）.ready（函数（）{
字段=[]、[]、[]、[]、[]、[]、[]、[]、[]、[]、[]、[]、[]；
颜色=[“黑色”、“黄色”、“蓝色”、“绿色”、“灰色”、“棕色”]；
菲尔菲尔德（）；
$（“.tile”）。在（'click'，function（）上{
控制台日志（“sfadfd”）；
var x=这个.getAttribute（“数据-x”）；
var y=这个.getAttribute（“数据-y”）；
控制台日志（“X:+X+”，Y:+Y）；
平铺（x，y）；
});
});
var tileClicked=函数（x，y）{
console.log（颜色[字段[y][x]]）；
字段[y][x]=0；
showField（）；
};
//将字段显示为具有漂亮颜色的整洁网格
var showField=函数（）{
控制台日志（“测试”）；
$（“.tile”）.remove（）；
对于（var i=0；i使用事件委派，因为您删除元素（.tile）并动态添加

$("#field").on('click', '.tile' ,function(){

});

我不知道，非常感谢！@IshaDijcks-很高兴能帮助你