无法建立连接-源不存在

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


        }


    });

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

  

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

这是现场演示：live demo

这是js垂直连接功能文档：js plumb connect

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

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

您能告诉我我在做什么错吗？