.mousedown() only called once for each element

Question

I am trying to make a chess game. So far i have only made the white pawns moveable (you move them by dragging them to where you want them to go). However, only the first move works. Why does this happen? I use

$(".piece").mousedown(function(){}

, but it is only called once.

Answer 1

The problem is $("#" + tileFn).append($("#" + tileIn).html()); which creates a new piece element, to whom the mousedown handler is not attached.

One solution is to use event deletagation, or instead of creating a new element just move the existing element like

function parent(element) {
  var parentID = $(element).parent().attr("ID");
  var parentClass = $(element).parent().attr("class");
  var parentType = $(element).parent().get(0).nodeName;

  if (parentID != null) {
    return ("#" + parentID);
  } else if (parentClass != null) {
    return ("." + parentClass);
  } else {
    if (parentType.toLowerCase() == "body") {
      parentType = document;
      return parentType;
    } else {
      return parentType;
    }
  }
}
var dimensions = 600; // must be divisible by 8
var tile1 = "<div class='tile tile1' id='";
var tile2 = "<div class='tile tile2' id='";
var end = "'></div>";
var multiplicity = "";
var tileIn = "";
var tileFi = "";
var classes = "";
var color = "";
var type = "";
var possible = [];
$(document).ready(function() {
  //setup start
  for (var i = 0; i < 4; i++) {
    for (var j = 0; j < 4; j++) {
      row = i * 2 + 1;
      column = j * 2 + 1;
      $("#container").append(tile1 + row + column + end + tile2 + row + (column + 1) + end);
    }
    for (var k = 0; k < 4; k++) {
      row = i * 2 + 2;
      column = k * 2 + 1;
      $("#container").append(tile2 + row + column + end + tile1 + row + (column + 1) + end);
    }
  }
  $("#container").css({
    height: dimensions,
    width: dimensions
  });
  $(".tile").css({
    height: dimensions / 8,
    width: dimensions / 8
  });
  $(".piece").css({
    height: dimensions / 8,
    width: dimensions / 8
  });
  $("<div class='b p piece'><img src='bp.icns' height='69'></div>").appendTo("#21, #22, #23, #24, #25, #26, #27, #28");
  $("<div class='b r piece'><img src='br.icns' height='69'></div>").appendTo("#11, #18");
  $("<div class='b n piece'><img src='bn.icns' height='69'></div>").appendTo("#12, #17");
  $("<div class='b b piece'><img src='bb.icns' height='69'></div>").appendTo("#13, #16");
  $("<div class='b k piece'><img src='bk.icns' height='69'></div>").appendTo("#14");
  $("<div class='b q piece'><img src='bq.icns' height='69'></div>").appendTo("#15");

  $("<div class='w p piece'><img src='wp.icns' height='69'></div>").appendTo("#71, #72, #73, #74, #75, #76, #77, #78");
  $("<div class='w r piece'><img src='wr.icns' height='69'></div>").appendTo("#81, #88");
  $("<div class='w n piece'><img src='wn.icns' height='69'></div>").appendTo("#82, #87");
  $("<div class='w b piece'><img src='wb.icns' height='69'></div>").appendTo("#83, #86");
  $("<div class='w q piece'><img src='wq.icns' height='69'></div>").appendTo("#84");
  $("<div class='w k piece'><img src='wk.icns' height='69'></div>").appendTo("#85");
  //setup end
  $(".piece").mousedown(function() {
    tileIn = parent($(this)).substr(1, 2);
    classes = $(this).attr("class");
    color = classes.charAt(0);
    type = classes.charAt(2);
    y = tileIn.charAt(0);
    x = tileIn.charAt(1);
    //white start
    if (color == "w") {
      //white pawn start
      if (type == "p") {
        if (y == "7") {
          possible = ["6" + x, "5" + x];
        } else {
          possible = [(y - 1) + x];
        }
        return;
      }
      //white pawn end
      //
      else if ("a" == "b") {

      }
    }
    //white end
    //black start
    else {

    }
    //white end	
  });
  $(".tile").mouseup(function() {
    tileFn = $(this).attr("id");
    if (jQuery.inArray(tileFn, possible) !== -1 && $(this).is(':empty')) {
      $("#" + tileFn).append($("#" + tileIn).contents());
    } else {}
    possible = [];
  });
});

* {
  user-drag: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
}
#container {
  margin: 0 auto;
  border: 1px solid gray;
}
.tile {
  float: left;
}
.tile1 {
  background-color: white;
}
.tile2 {
  background-color: rgba(0, 0, 0, 0.58);
}
.piece {
  padding: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<div id="container"></div>