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

you need to share your code also as part of the question... not just a link to the page — Arun P Johny
I can't seem to make a single move work. What do you mean by the first move only working. Note that .mousedown() is only called when the mouse is down once, not constantly (and can't be called untill you unclick and re-click). mousedown != mouseIsDown — Spencer Wieczorek

Arun P Johny Arun P Johny · Accepted Answer · 2014-11-12T02:41:47

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>

.mousedown() only called once for each element

2 Answers