jQuery : jquery에서 클릭 이벤트를 수행하는 방법

Question

나는 틱택 토 게임을 가지고 있는데, 내 보드는 <table>이고 <td>은 셀입니다. td를 클릭 할 때마다 x img 또는 o img가 추가됩니다.

이것은 내 jQuery 코드입니다. 참고 : check var는 이미 보드에 5 회 이상의 클릭이 있으면 누군가가 이미 게임에 승리했는지 확인하기 시작합니다.

var player = 1; 
var check = 0; 

$("td").bind("click", function(){ 
      if(player==1){ 
       $('<img src="x.png" alt="x" name="x"/>').appendTo(this); 
       player=player+1; 
       check+=1; 
      } else { 
       $('<img src="o.jpg" alt="o" name="o"/>').appendTo(this); 
       player=player-1; 
       check+=1; 
      } 
     }); 

내 HTML 테이블이 있습니다 :

<table> 
    <tr> 
     <td id="one"></td> 
     <td id="two"></td> 
     <td id="three"></td> 
    </tr> 
    <tr> 
     <td id="four"></td> 
     <td id="five"></td> 
     <td id="six"></td> 
    </tr> 
    <tr> 
     <td id="seven"></td> 
     <td id="eight"></td> 
     <td id="nine"></td> 
    </tr> 
</table> 

내 문제는 내 경력 조건 코드 (간결을 위해, 난 그냥 여기에 게시하여 상태를 어떻게 해야할지 모르는 경우 세포 하나가 이 세 I에서 mouseUp 기능을 만들어 지금은, 플레이어 하나) 승리의 X 표시가 : 처음

$("td").mouseup(function(){  
      var one = $("#one").children("img").attr("name"); 
      var two = $("#two").children("img").attr("name"); 
      var three = $("#three").children("img").attr("name"); 

     if(check=>5){ 
       if(one=="x"&&two=="x"&&three=="x"){ 
         alert("player one wins"); 
       } 
     } 

}); 

를, 내가 체크 + = 1 행 다음에이 코드를 넣어,하지만 난 즉시 일이 있다는 것을 발견 클릭 지연, 동일한 일도 현재 코드에서 일어납니다. 두 경우 모두 한 번에 두 가지 작업을 수행한다는 것을 알았습니다. 이미 우승 한 조합이 있는지 확인합니다 (하지만 이미지가 아직 삽입되지 않았으므로 아무것도 수행하지 않습니다). img가 삽입됩니다.

내가 필요하다고 생각하는 것은 이미지가 삽입 된 직후마다 클릭 후 기능이있어 이미 우승 한 조합이 있는지 확인합니다.

Answer 1

하면 클릭 핸들러의 마지막에 추가

var player = 1; 
var check = 0; 

$("td").bind("click", function() { 
    if (player == 1) { 
     $('<img src="x.png" alt="x" name="x"/>').appendTo(this); 
     player = player + 1; 
     check += 1; 
    } else { 
     $('<img src="o.jpg" alt="o" name="o"/>').appendTo(this); 
     player = player - 1; 
     check += 1; 
    } 

    //just add it after here 
    var one = $("#one").children("img").attr("name"); 
    var two = $("#two").children("img").attr("name"); 
    var three = $("#three").children("img").attr("name"); 

    if (check >= 5) { 
     if (one == "x" && two == "x" && three == "x") { 
      alert("player one wins"); 
     } 
    } 
}); 

데모 : Fiddle

---

문제는 모르기 때문에 mouseUp 이벤트는 것 모르기 때문에 mouseUp 핸들러 그렇게 트리거 된 후 이벤트가 발생되는 클릭입니다 check 항상 잘못된 값

데모 : Fiddle