Вращение холста работает только в первый раз

Question

Я пытаюсь вращать холст при каждом наведении мыши, но он работает только в первый раз.
Вы можете поиграть с ним здесь: http://jsfiddle.net/h3Z7j/2/

Причина, по которой я поворачиваю его на 0 градусов, заключается в том, чтобы преобразовать его в холсты под нагрузкой, поскольку я загружаю img в первый раз.

скрипт вращения: http://code.google.com/p/jquery-rotate/downloads/detail?name=jquery.rotate.1-1.js

<div class="gameboard">
    <img width="40" height="40" id="1-1" src="http://www.netbsd.org/images/download-icon-orange.png" alt="">
    <img width="40" height="40" id="2-1" src="http://www.netbsd.org/images/download-icon-orange.png" alt="">
    <img width="40" height="40" id="1-2" src="http://www.netbsd.org/images/download-icon-orange.png" alt="">
    <img width="40" height="40" id="2-2" src="http://www.netbsd.org/images/download-icon-orange.png" alt="">
</div>

$(document).ready(function () {
    $(".gameboard img").each(function () {
        $(this).rotateLeft(0);
    });
    $(".gameboard canvas").mouseover(function () {
        $(this).rotateLeft();
    });
});  

редактировать
Если есть другие скрипты ротации, которые работают лучше, я с радостью перейду на это.

Answer 1

Опираясь на ответ Рори, вы можете добиться одного поворота за наведение мыши, установив флаг true / false при наведении мыши / мышью:

$(document).ready(function () {
    var stopSpin = false;
    $(".gameboard img").each(function () {
        $(this).rotateLeft(0);
    });
    $(".gameboard").delegate('canvas', 'mouseover', function () {
        if (!stopSpin){
            $(this).rotateLeft();
        }
        stopSpin = true;
    });
    $(".gameboard").delegate('canvas', 'mouseout', function () {
        stopSpin = false;
    });
});

См .: http://jsfiddle.net/CK5hh/

Answer 2

Проблема в том, что элемент canvas удаляется, а затем читается в DOM. Это тогда теряет обработчик mouseover, помещенный на него. Если вместо этого вы прикрепите событие с помощью delegate, оно будет работать:

$(document).ready(function () {
    $(".gameboard img").each(function () {
        $(this).rotateLeft(0);
    });
    $(".gameboard").delegate('canvas', 'mouseover', function () {
        $(this).rotateLeft();
    });
});

Хотя я не уверен, что эффект - именно то, что вам нужно:)

Пример скрипки