Повторить события в jsf после обновления Ajax (PrimeFaces и Snap.svg)

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