点击不注册

Question

I've added a bunch of buttons using Jquery, all of them in the same class, and I'm trying to have them do something when clicked. 我使用Jquery添加了一堆按钮，所有按钮都在同一类中，并且我试图让它们在单击时执行某些操作。 I have a simple on click function for them right now that just logs the word "clicked" to the console, but it is not registering any of my clicks. 我现在为他们提供了一个简单的单击功能，只需将“单击”一词记录到控制台中，但它没有注册我的任何单击。 Here is my code: 这是我的代码：

HTML: HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Minesweeper</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="dimensions">
        Width:  <input type="Width" id="width"><br/>
        Height: <input type="Height" id="height"><br/>
        <button type="button" id="new-game" onclick="newGame()">Create</button>
    </div>
    <div id="board"></div>
</body>
</html>

Javascript: 使用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();
}

You can see that my $(".tile") on click function has the word "clicked" logged to console, but that never happens when I click on one. 您可以看到我的$(".tile") on click函数在控制台上记录了单词“ clicked”，但是当我单击它时却从未发生。

I have tried wrapping the on click function in $(document).ready(function(){}) , but it still does not work. 我已经尝试将on click函数包装在$(document).ready(function(){}) ，但是它仍然无法正常工作。

Answer 1

You need to use 您需要使用

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

Event handlers are bound only to the currently selected elements; 事件处理程序仅绑定到当前选定的元素； they must exist on the page at the time your code makes the call to .on(). 当您的代码调用.on（）时，它们必须存在于页面上。 To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page. 为了确保元素存在并可以选择，请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定。 If new HTML is being injected into the page, select the elements and attach event handlers after the new HTML is placed into the page. 如果将新HTML注入到页面中，请在将新HTML放入页面后选择元素并附加事件处理程序。

I made the change in your HTML and tested it and works as expected. 我对您的HTML进行了更改，并对其进行了测试，并按预期工作。 Cheers! 干杯!

点击不注册

问题描述

1 个解决方案

解决方案1
2 2018-11-20 00:01:05

点击不注册

问题描述

1 个解决方案

解决方案1 2 2018-11-20 00:01:05

解决方案1
2 2018-11-20 00:01:05