Javascript 单击“不注册”

我使用Jquery添加了一系列按钮，它们都在同一个类中，我试图让它们在单击时做一些事情。我现在为他们提供了一个简单的点击功能，它只是将单词“clicked”记录到控制台，但它没有记录我的任何点击。这是我的密码：

HTML:

扫雷艇
宽度：

高度：

创造

Javascript:

function newGame() {
    var cols = $("#width").val();
    var rows = $("#height").val();

    if (cols < 8 || rows < 8) {
        return;
    }else if (cols > 40 || rows > 30) {
        return;
    }
    boardClear();
    possibleBombs = (rows * cols) - 1;
    numBombs = 0;
    for (i = 1; i <= rows; i++) {
        for (j = 1; j <= cols; j++) {
            if (numBombs < possibleBombs) {
                q = Math.floor(Math.random() * 2);
                if (q == 0) {
                    numBombs += 1;
                }
                $("#board").append('<button type="button" class="tile" data-row = ' + i + 'data-col = ' + j + 'data-contains = ' + q + '></button>');
            } 
            else {
                $("#board").append('<button type="button" class="tile" data-row = ' + i + 'data-col = ' + j + 'data-contains = 1 ></button>');
            }
        }
        $("#board").append("<br/>");
    }
    $(".tile").width(100/cols);
    $(".tile").height(100/rows);
    console.log("bombs: " + numBombs, "possible: " + possibleBombs);
}

$(".tile").on('click', function() {
    $(this).css("color", "black");
    console.log("clicked");
});

function boardClear() {
    $("#board").empty();
}

函数newGame（）{
var cols=$（“#宽度”）.val（）；
变量行=$（“#高度”）.val（）；
如果（列数<8 | |行数<8）{
返回；
}否则如果（列数>40 | |行数>30）{
返回；
}
boardClear（）；
possibleBombs=（行*cols）-1；
numBombs=0；
对于（i=1；i您需要使用

$(document).on('click', '.tile', function() {

事件处理程序仅绑定到当前选定的元素；它们必须在代码调用.on（）时存在于页面上。若要确保元素存在并且可以选择，请在页面上HTML标记中的元素的文档就绪处理程序内执行事件绑定。如果要将新HTML注入页面，请在将新HTML放入页面后选择元素并附加事件处理程序

我在你的HTML中做了更改，并测试了它，效果如预期。干杯！
$（“tile”）
但是你没有
s，也许你想要
$（'.tile'）
（也可以使用事件委派）不确定这是怎么发生的，因为我以前把它作为
.tile
，但这并不能解决问题。
（也可以使用事件委派）
，您也尝试过吗？将jquery和脚本标记的
头
移动到结束
正文
标记的正上方。@AshleyBrown这并不能解决问题。需要注意的是，此方法称为。
$(document).on('click', '.tile', function() {