Ajax更新（PrimeFaces和Snap.svg）後jsf中的重新綁定事件

Question

我創建了一個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); 
    }); 
}); 

它的工作原理和草稿（圓圈）在懸停時長大，並在懸停時返回。但是，當我點擊草案我呼籲聽衆，更新它和一些廣場這樣的：

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