.mousedown()은 각 요소마다 한 번만 호출됩니다.

Question

체스 게임을 만들려고합니다. 지금까지 나는 단지 흰색 졸을 움직일 수있게 만들었습니다. (당신이 원하는 곳으로 드래그하여 이동시킵니다.) 그러나 첫 번째 이동 만 작동합니다. 왜 이런 일이 생길까요? 나는

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

을 사용하지만 한 번만 호출됩니다. Link to project.

Answer 1

문제는 이는 MouseDown 핸들러가 부착되지 누구 piece 새로운 요소를 생성 $("#" + tileFn).append($("#" + tileIn).html());이다.

한가지 해결책은 그것에 PICES를 갖는 필드를 선택하는 단지

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") 같은 기존의 요소를 이동하거나, 대신에 새로운 요소를 생성 이벤트 deletagation를 사용하는 귀하가 진술을 실행할 때. 조각이 보드에서 움직일 때 필드에 기능을 추가해야합니다.

그래서 mouseup 함수는 새 필드의 조각에 대한 호출을 다시 설정해야합니다.