0
イベントを取得しようとしていますが、最近追加された要素をクリックしていますが、動作する古い要素をクリックすると機能しません。私は2つのノード間にエッジを作成しています。そのノードをクリックすると、削除されます。Cytoscape動的に追加された要素のクリックイベントを取得できません
<!DOCTYPE>
<html>
<head>
<title>cytoscape-dagre.js demo</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
<!-- for testing with local version of cytoscape.js -->
<!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->
<script src="https://cdn.rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.min.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.1.2/cytoscape-dagre.js"></script>
<style>
body {
font-family: helvetica;
font-size: 14px;
}
#cy {
width: 100%;
height: 100%;
position: relative
left: 0;
top:30;
z-index: 999;
}
h1 {
opacity: 0.5;
font-size: 1em;
}
</style>
<script>
var connectIsClicked;
var removeIsClicked;
$(function(){
var nodeFather = "";
var nodeTarget = "";
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
boxSelectionEnabled: false,
autounselectify: true,
layout: {
name: 'dagre'
},
style: [
{
selector: 'node',
style: {
'content': 'data(id)',
'text-opacity': 0.5,
'text-valign': 'center',
'text-halign': 'right',
'background-color': '#11479e'
}
},
{
selector: 'edge',
style: {
'width': 4,
'target-arrow-shape': 'triangle',
'line-color': '#9dbaea',
'target-arrow-color': '#9dbaea',
'curve-style': 'bezier'
}
}
],
elements: {
nodes: [
{ data: { id: 'n0' } },
{ data: { id: 'n1' } },
{ data: { id: 'n2' } },
{ data: { id: 'n3' } },
{ data: { id: 'n4' } },
{ data: { id: 'n5' } },
{ data: { id: 'n6' } },
{ data: { id: 'n7' } },
{ data: { id: 'n8' } },
{ data: { id: 'n9' } },
{ data: { id: 'n10' } },
{ data: { id: 'n11' } },
{ data: { id: 'n12' } },
{ data: { id: 'n13' } },
{ data: { id: 'n14' } },
{ data: { id: 'n15' } },
{ data: { id: 'n16' } }
],
edges: [
{ data: { source: 'n0', target: 'n1' } },
{ data: { source: 'n1', target: 'n2' } },
{ data: { source: 'n1', target: 'n3' } },
{ data: { source: 'n4', target: 'n5' } },
{ data: { source: 'n4', target: 'n6' } },
{ data: { source: 'n6', target: 'n7' } },
{ data: { source: 'n6', target: 'n8' } },
{ data: { source: 'n8', target: 'n9' } },
{ data: { source: 'n8', target: 'n10' } },
{ data: { source: 'n11', target: 'n12' } },
{ data: { source: 'n12', target: 'n13' } },
{ data: { source: 'n13', target: 'n14' } },
{ data: { source: 'n13', target: 'n15' } },
]
},
});
cy.nodes().on("tap", function(){
if(connectIsClicked){
if(nodeFather === ""){
nodeFather = this;
}else{
nodeTarget = this;
var edgeId = nodeFather.id()+"_"+nodeTarget.id();
var ele = cy.add([
{ group: "edges", data: {id: edgeId,source: nodeFather.id(), target: nodeTarget.id() } }
]);
nodeFather = "";
nodeTarget = "";
}
}
if(removeIsClicked){
//alert($(this));
this.remove();
}
});
cy.edges().on("tap", function(){
if(removeIsClicked){
//It does not work on dynamically edges
alert(this.id());
this.remove();
}
});
});
</script>
<script>
function connect(element){
if(!connectIsClicked){
element.style = "background-color: #ff0000;";
connectIsClicked = true;
removeIsClicked = false;
var btnRemove = document.getElementById("remove");
btnRemove.style = "";
}else{
element.style = "";
connectIsClicked = false;
}
};
function remove(element){
if(!removeIsClicked){
element.style = "background-color: #ff0000;";
removeIsClicked = true;
connectIsClicked = false;
var btnConnect = document.getElementById("connect");
btnConnect.style = "";
}else{
element.style = "";
removeIsClicked = false;
}
};
</script>
</head>
<body>
<input type="submit" id="connect" value="Connect" onclick="connect(this);">
<input type="submit" id="remove" value="Remove" onclick="remove(this);">
<h1>cytoscape-dagre demo</h1>
<div id="cy"></div>
</body>
</html>