Rebind events in jsf after Ajax update (PrimeFaces and Snap.svg)

Question

I have created a custom component with Snap.svg.js that draws graphic on svg canvas. It works perfect but I have problem with events. I bind events such:

var draughts = snap.selectAll("circle[fill~='" + draughtMineColor + "']");
draughts.forEach(function (draught) {
    draught.unhover();
    draught.hover(function () {
        draught.animate({r: draughtRadius + 2}, 100, snap.easeIn);
    }, function () {
        draught.animate({r: draughtRadius}, 100, snap.easeIn);
    });
});

It works and draughts (circles) grows up on hover in and returns back on hover out. But when I click on draught I call listener that updates it and some squares like this:

public void onClick(ClickEvent event) {
    if (event.getTarget() instanceof Draught) {
        Draught clicked = (Draught) event.getTarget();
        if (prevClicked != null) {
            prevClicked.updateShape();
        }
        clicked.setFill("red");
        board.resetDeskDrawing();
        board.highlightAllowedMoves(clicked);
        prevClicked = clicked;
    } else if (event.getTarget() instanceof Square) {
        Square square = (Square) event.getTarget();
        board.moveDraught(prevClicked, square);
    }
}

And JSF:

<h:form prependId="false">
    <p:remoteCommand name="updateCanvas" update="canvas" oncomplete="updatePlay();"/>
    <snap:svg id="canvas" value="#{playView.model}" style="height: 600px; width: 600px;">
        <p:ajax event="click" listener="#{playView.onClick}"
                oncomplete="updateCanvas();"/>
    </snap:svg>
</h:form>

But after click hover stops working. Any ideas?

Answer 1

The problem was in improperly initiated snap.svg. It should be like this:

$(document).ready(function () {
    updatePlay();
});

updatePlay = function () {
    **snap = Snap("#canvas");**

    var draughts = snap.selectAll("circle[fill~='" + draughtMineColor + "']");
    console.log(draughts);
    draughts.forEach(function (draught) {
        draught.unhover();
        draught.hover(function () {
            draught.animate({r: draughtRadius + 10}, 100, snap.easeIn);
        }, function () {
            draught.animate({r: draughtRadius}, 100, snap.easeIn);
        }, draught);
    });
};