javascript - 按钮仅在重新加载后第二次单击时起作用

Question

我正在创建一个带有图 block 的板，可以单击这些图 block 来更改颜色。我有一个“清除板”按钮，可以有效地清除板，使所有图 block 再次变为白色，但由于某种原因，该按钮仅在每个页面重新加载后第二次单击时起作用。我尝试将 JavaScript 包装在文档就绪函数中，但这没有帮助。如何让它在重新加载后第一次点击时工作？

HTML:

<h1 class="title">Wacky Painter</h1>
    <div class="easel">
    </div>
    <form class="clear_board">
        <button type="button" id="clear_button" class="btn" onclick="clearBoard()">Clear Board</button>
    </form>

CSS:

body {
  font-family: sans-serif;
  color: #ff757a;
}

.easel {
  width: 300px;
  outline: #c8c8c8 5px solid;
  margin: 0 auto;
}

.square {
  width: 20px;
  height: 20px;
  outline: thin solid #c8c8c8;
  display: inline-block;
  margin-top:-2px;
}

form {
  margin: 10px auto;
}

.title {
  margin: 0 auto;
  text-align: center;
  padding-bottom: 20px;
}

JavaScript(使用 jQuery):

window.setUpEasel = function() {
    var squareString = "";
    for(var i=0; i < 195; i++) {
        squareString+='<div class="square"></div>';
    }
    $('.easel').append(squareString)
}

window.giveColor = function() {
    $('.easel').on('click', '.square', function() {
        var letters = '0123456789ABCDEF'.split('');
        var randomColor = '#';
        for (var i = 0; i < 6; i++ ) {
            randomColor += letters[Math.round(Math.random() * 15)];
        }
        $($(this)).css('background-color', randomColor);
    })
}
window.clearBoard = function() {
    $('#clear_button').on('click', function () {
        $('.square').css('background-color', 'white');
    })
}

    $(function () {
        setUpEasel();
        giveColor();
    });

这是一个有效的 jsfiddle:http://jsfiddle.net/MichelleGlauser/yz6mdx1f/1/

Answer 1

在单击按钮之前，您不会在清除按钮上设置 jQuery 单击事件处理程序(使用在按钮属性中分配的事件处理程序)。试试这个:

// code above stays the same

// Adjust so that it is merely responsible for clearing the background
window.clearBoard = function() {
    $('.square').css('background-color', 'white');
};

$(function() {
    setUpEasel();
    giveColor();

    // Assign the click handler on DOM-ready
    $('#clear_button').on('click', function () {
        clearBoard();
    });
});

最后，从按钮标记中删除内联 onclick 属性。

• DEMO