title: Button Only Works on Second Click After Reload
body: <p>I'm creating a board with tiles that can be clicked to change colors. I have a "Clear Board" button that effectively clears the board so all tiles are white again, but for some reason the button only works on the second click after each page reload. I've tried wrapping my JavaScript in a document ready function but that didn't help. How can I get it to work on the first click after a reload?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;h1 class="title"&gt;Wacky Painter&lt;/h1&gt;
      &lt;div class="easel"&gt;
      &lt;/div&gt;
      &lt;form class="clear_board"&gt;
          &lt;button type="button" id="clear_button" class="btn" onclick="clearBoard()"&gt;Clear Board&lt;/button&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>JavaScript (with jQuery):</p>
  
  <pre><code>window.setUpEasel = function() {
      var squareString = "";
      for(var i=0; i &lt; 195; i++) {
          squareString+='&lt;div class="square"&gt;&lt;/div&gt;';
      }
      $('.easel').append(squareString)
  }
  
  window.giveColor = function() {
      $('.easel').on('click', '.square', function() {
          var letters = '0123456789ABCDEF'.split('');
          var randomColor = '#';
          for (var i = 0; i &lt; 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();
      });
  </code></pre>
  
  <p>Here's a working jsfiddle: <a href="http://jsfiddle.net/MichelleGlauser/yz6mdx1f/1/" rel="nofollow">http://jsfiddle.net/MichelleGlauser/yz6mdx1f/1/</a></p>