在wordpress小部件的Canva按钮

Question

我想在我的wordpress小部件中使用canva按钮。

当您创建canva按钮时，它们会向您提供您复制并粘贴到站点中的代码，在我的小部件UI中。代码如下所示：

<span data-type="poster" data-apikey="3KIFIE6ZHYTPUYNZF3V7" class="canva-design-button">Design a poster</span>

<script>(function(c,a,n){var w=c.createElement(a),s=c.getElementsByTagName(a)[0];w.src=n;s.parentNode.insertBefore(w,s);})(document,'script','https://sdk.canva.com/v1/api.js');</script>

Span是按钮，javascript将在头部包含一个canva js文件，它将设置按钮的样式并在其上添加click事件。当您单击按钮时，您将弹出窗口以创建一些设计。

以下是demo当你在前端放置canva按钮时的样子。

以下是我在小部件用户界面中使用它的截图：

问题是，当我将窗口小部件拖放到侧边栏并且没有显示canva弹出窗口时，点击事件不起作用。在边栏中拖放窗口小部件后，我需要刷新页面才能使点击事件工作。我想这是因为Widget的HTML会附加到侧边栏，但已经添加了点击事件。

有没有办法用一些javascript代码来处理它。需要说我无法更改Canva javascript文件，所以我需要使用我的javascript

Answer 1

data-api-key由canva提供。示例一无效。