javascript - 无法建立连接 - 源不存在

Question

我有一个简单的部分，用户可以在其中根据需要从一个元素连接到另一个元素。连接后可以是这样的。我正在使用 jsPlumb 进行连接。

连接后，如果用户满意，他/她可以保存它，

一切都按我的意愿正确保存，现在当用户重新加载页面连接时，例如（con_6，con_18）不显示。

这是保存数据的json。

{
    "movies": [
        {
            "left": 237,
            "top": 99,
            "movieid": "51"
        },
        {
            "left": 241,
            "top": 263,
            "movieid": "10"
        },
        {
            "left": 746,
            "top": 184,
            "movieid": "12"
        }
    ],
    "connections": [
        {
            "buttonid": "0",
            "movieid": "12"
        },
        {
            "buttonid": "4",
            "movieid": "12"
        }
    ]
}

这是我加载连接的功能

$.getJSON('datasaved/settings2.json', function (data) {

        var flowchartconnection =data.connections;

        for( var j = 0; j < flowchartconnection.length; j++ ) {

            console.log(flowchartconnection[j].buttonid);

            jsPlumb.connect({ source: flowchartconnection[j].buttonid, target: flowchartconnection[j].movieid });
            console.log(jsPlumb.connect);


        }


    });

不幸的是，我收到以下错误：

无法建立连接 - 源不存在。

这是现场演示：现场演示

这是 js plumb connect 函数文档：js plumb connect

这是我的现场演示中的 console.log：现场演示

正如您在控制台上看到的，在连接发生之前，源和目标 id 在 DOM 上可用，

你能告诉我我做错了什么吗？

标签： javascriptjqueryjsonjquery-uijsplumb