Cannot access certain div class using jQuery

Question

Brief synopsis of what I am doing: As of now I am trying to build a 6 x 6 grid and get some sign of life when I click on any of the grid boxes.

The result I want for now, is by clicking in any of the boxes I get a console message saying a piece was picked.

My main goal is to be able to differentiate between which box I picked, but first I need to figure it out generally.

HTML:

<div class="container">
  <div class="row">
    <div class="btn btn-lg btn-success col-lg-offset-4 col-md-4" id="makeBoard">Generate Board</div>
  </div>
  <div id="spacer"></div>
  <div class="row">
    <div class="col-md-12" id="newBoard"></div>
  </div>
</div>

JQuery:

$(function(){

            $('#makeBoard').click(function() {
                var boardSize = 6;
                makeBoard(boardSize);
            });

            function makeBoard(boardSize){
                for(i = 0; i < boardSize; i++){
                    $('#newBoard').append("<div class='row' id='row"+i+"'>");
                    var row = "#row"+i;
                    for(j = 0; j < boardSize; j++){
                        var content = "<div class='col-md-2 boardPiece' id='"+i+"_"+j+"'></div>";
                        $(row).append(content);
                    }

                    $('#newBoard').append("</div>");
                }
            }

            $('div.boardPiece').click(function() {
                console.log("You clicked a piece!");
            });


        });

I double checked the html output by inspecting the element and indeed all the squares have the class 'boardPiece' but whenever I click on anywhere in the grid nothing gets logged in the console.

However, I have tried to console log the id 'newBoard' by clicking anywhere in the box and that worked. I'm assuming it has something to do with the boardPiece not being hardcoded in using HTML like newBoard is?

I'm using JS/JQuery so I can eventually change the board size from a form.

Thank you in advance.

Edit (Answer Below)

//Changed from this
$('div.boardPiece').click(function() {
   console.log("You clicked a piece!");
});

//To this
$('.row').on("click", "div.boardPiece", function() {
   console.log("You clicked a piece!");
});