.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>

Answer 2

The selector $(".piece") only selects the fields which has pices on it at the time you execute the statement. You will have to add the function to the fields as the pieces are moved on the board.

So you mouseup function should probably set the call back for the piece on the new field.