Cytoscape 无法获取动态添加元素的点击事件

Question

我试图让事件点击最近添加的元素，但它不起作用，当我点击旧元素时它起作用了。我在两个节点之间创建一条边，当我点击它时我希望它被删除。

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

Answer 1

如果对 A 点存在的节点进行绑定，这将如何影响稍后 B 点存在的一组新节点？

要么在添加节点时收听新添加的节点，要么使用委托选择器收听核心：http://js.cytoscape.org/#cy.on

Cytoscape 无法获取动态添加元素的点击事件

Cytoscape Can't get click event on dynamically added elements

javascript

cytoscape.js