Ajax 更新后在 jsf 中重新绑定事件（PrimeFaces 和 Snap.svg）

Question

我用 Snap.svg.js 创建了一个自定义组件，它在 svg canvas 上绘制图形。它工作完美，但我对事件有疑问。我绑定这样的事件：

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);
    });
});

它有效，草稿（圆圈）在悬停时长大，returns 悬停时返回。但是当我点击草稿时，我会调用更新它的监听器和一些像这样的方块：

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);
    }
}

和 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>

但是在点击悬停后停止工作。有什么想法吗？

Answer 1

问题是未正确启动 snap.svg。应该是这样的：

$(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);
    });
};

Ajax 更新后在 jsf 中重新绑定事件（PrimeFaces 和 Snap.svg）

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

javascript

jsf

primefaces

snap.svg