jquery - 同じイベントの別の効果が発生したときにイベントの効果を停止する方法は?

Question

これはhtmlコードだと考えてください：

        <table>         
        <tr>
            <td><img id="a11" src="photos/empty.png" /></td>
            <td><img id="a12" src="photos/empty.png" /></td>
            <td><img id="a13" src="photos/empty.png" /></td>
        </tr>

        <tr>
            <td><img class="move" id="a21" src="photos/Pawn.png" /></td>
            <td><img class="move" id="a22" src="photos/Pawn.png" /></td>
            <td><img class="move" id="a23" src="photos/Pawn.png" /></td>
        </tr>
    </table>

「empty.png」は単なる空の画像と考えてください

これはjQueryコードです：

$(document).ready(function() {

$(".move").click(function (){

    //reset the background color of the first row
    $("#a11, #a12, #a13" ).css("background-color" , "");

    //fetch the src attribute of the clicked element
    var src = $(this).attr("src");

    //fitch the id attribute of the clicked element
    var Id  = $(this).attr("id");
    var Id  = "#"+Id;
    var x = Id[2];
    var y = Id[3];

    ////////////////////////

    newx = x - 1;
    newsy = y;

    //form the new id of the above cell
    newId = "#a" + newx + newsy;

    //make the background of this cell 'red'
    $(newId).css("background-color","red");

    //fire event that when click on this cell move the image to it and remove the image from original cell
    $(newId).click(function(){

        $(Id).attr("src","photos/empty.png");
        $(this).attr("src",src);
        $("#a11, #a12, #a13" ).css("background-color" , "");


    });

});

});

必須:
2 行目のセルのいずれかをクリックすると、対応する上のセルの背景が赤に変わります

それをクリックすると、画像がそこに移動します。

問題

最初のセル (最初のポーン #a21) をクリックすると問題が発生します。

次に、2 番目のセル (2 番目のポーン #a22) をクリックします。

次に、3 番目のセル (3 番目のポーン #a23) をクリックします。

次に、#a13 または #a12 セルをクリックします ... 対応する下の画像がそこに移動します

そして、私はそれをしたくありません

前のイベントの効果を取り除きたいのですが、最後のイベントの効果しか実行されません