.mousedown() только один раз для каждого элемента

Question

Я пытаюсь сделать шахматную игру. До сих пор я делал передвижные белые пешки подвижными (вы перемещаете их, перетаскивая их туда, куда вы хотите их). Однако работает только первый ход. Почему это происходит? Я использую

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

, но это называется только один раз. Link to project.

Answer 1

Проблема заключается в том $("#" + tileFn).append($("#" + tileIn).html());, который создает новый piece элемент, к которому обработчик MouseDown не прилагается.

Одно из решений состоит в использовании deletagation событий, или вместо того, чтобы создавать новый элемент просто переместить существующий элемент, как

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 \t 
 
    }); 
 
    $(".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

Селектор $(".piece") выбирает только те поля, которые имеет СТОМН на нем в момент выполнения инструкции. Вам нужно будет добавить функцию к полям, поскольку части будут перемещены на доске.

Таким образом, функция mouseup должна, вероятно, установить вызов для части в новом поле.