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

我用Snap.svg.js创建了一个自定义组件，它在svg画布上绘制图形。它工作得很好，但我对事件有问题。我对以下事件有约束力：

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

它工作，吃水（圆）在“悬停入”时增长，在“悬停出”时返回。但当我点击Draw时，我会调用listener来更新它和一些方块，如下所示：

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

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

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

---

但单击鼠标后，鼠标悬停停止工作。有什么想法吗？

问题出在snap.svg启动不正确的地方。应该是这样的:

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

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

---

悬停是Snap.svg库中的函数，它很可能是由Snap.svg仅在document ready事件上添加EventHandler引起的。如果您能找到如何再次添加这些事件处理程序（源代码已打开，请查找函数），您可以在ajax oncomplete中调用该函数。第一个代码段来自updatePlay（）函数，该函数在事件更新oncomplete时在远程命令updateCanvas（）中调用（最后一个代码段）。它调用了悬停事件处理程序。很抱歉，不知道我为什么错过了。我猜updatePlay（）被触发了？为什么要进行两步更新？Ajax->RemoteCommand。你不能将二者结合在一起吗？是的，它会在更新时启动。因为我认为它将在更新操作后以正确的方向调用Ajax，然后自定义js函数，我也尝试这样做，但任何地方都调用了函数updatePlay，但没有触发事件。