title: Very Simple. Table from JS creating blinking cursor
body: <p>I'm hashing out a project to make a multi-faceted <code>Tic-Tac-Toe</code> game...</p>
  
  <p><strong>However...</strong></p>
  
  <p>Each <code>table cell</code> gives me this annoying blinking cursor. It's like it is acting as an <code>input</code>. </p>
  
  <p><strong>Any ideas why...? Or how to remove it?</strong></p>
  
  <p>Chrome works fine. <code>Firefox 26.0 throws this error.</code></p>
  
  <p><strong>Current live version:</strong>
  <a href="http://sinsysonline.com/tictactoe_test.html" rel="nofollow noreferrer">http://sinsysonline.com/tictactoe_test.html</a></p>
  
  <hr>
  
  <p><strong>FULL CODE:</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Tic Tac Toe! (and more...)&lt;/title&gt;
    &lt;meta name="description" content="Tic Tac Toe"&gt;
    &lt;meta name="author" content="SinSysOnline"&gt;
    &lt;script src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
    &lt;style&gt;
    body{
      font-family:"Lucida Console", Monaco, monospace;
    }
    td{
      padding:0;
      margin:0;
      border-right:1px solid #000;
      border-bottom:1px solid #000;
      width:100px;
      height:100px;
      text-align:center;
      font-size:72px;
    }
    td:last-child{
      border-right:none;
      border-bottom:1px solid #000;
    }
    tr:last-child td{
      border-bottom:none;
    }
    table{
      padding:25px;
      margin:0 auto;
      cursor:pointer;
    }
    #dashboard{
      background:#CCC;
      padding:15px;
      border:1px solid #000;
      box-shadow:0 5px 15px #000;
    }
  #alert{
      font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
      color:#F00;
      text-align:right;
  }
  .check{
      background:url("check.png");
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="dashboard"&gt;
      &lt;p&gt;How large is your grid? (3-10)&lt;/p&gt;
      &lt;input type="text" id="size" size="1" /&gt;
      &lt;input type="button" id="go" value="Create Board / Reset" /&gt;
      &lt;p id="alert"&gt;Alerts Live Here&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;table id="board"&gt;
  &lt;/table&gt;
  
  &lt;script&gt;
  var b=[], c=0;
  $("#go").click(function () {
      var b=[],
          s = parseInt($("#size").val());
  
      if (s&lt;3 || s&gt;10) { alert("That is not a valid input. Please select 3-10"); return; }
  
      $('#board tr').remove();
      $('#alert').text("Your Turn!");
  
      for(var i=0;i&lt;s;i++){
          var tempArr = [];
          for(var j=0;j&lt;s;j++){ tempArr[j] = ""; }
          b.push(tempArr);
      }
  
      for (var i = 0; i &lt; s; i++) {
          var $tr = $('&lt;tr /&gt;', {id: 'row_' + i }).data('index', i + 1);
          $("#board").append("&lt;tr id='row_" + i + "'&gt;");
  
          for (var j = 0; j &lt; s; j++) {
              $('&lt;td /&gt;', {
                  id: 'col_' + j
              }).data('index', j + 1).appendTo($tr);
          }
  
          $("#board").append($tr);
      }
  
      $("#board").on('click', 'td', function () {
          var $td = $(this),
              td = $td.data('index'),
              row = $td.parent().data('index');
  
          if(b[row-1][td-1]!==""){
              alert("Somebody already went there...");
          } else {
              b[row-1][td-1] = "X";
              $td.addClass("check");
              $('#alert').text(b);
          }
      });
  });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>