无法建立连接 - 源不存在

我有一个简单的部分，用户可以根据需要从一个元素连接到另一个元素。连接后可以这样。我使用 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);


        }


    });

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

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

这是现场演示：现场演示 https://videomill-bot.audiencevideo.com/editor/?settings2

这是 js plumb connect 函数文档：js 垂直连接 https://community.jsplumbtoolkit.com/doc/connect-examples.html

这是我的现场演示中的 console.log：现场演示 https://videomill-bot.audiencevideo.com/editor/

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

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