Javascript wordpress小部件中的Canva按钮

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

当您创建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将在head中包含一个canvajs文件，该文件将设置按钮样式并在其上添加click事件。当你点击按钮时，你会弹出窗口来创建一些设计

这里是当你把canva按钮放在前端时的样子

下面是我在小部件UI中如何使用它的屏幕截图：

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

---

有没有办法用一些javascript代码来处理它。需要说明的是，我无法更改Canva javascript文件，因此我需要使用我的javascript进行更改。数据api键由Canva提供。示例1无效

数据api密钥由canva提供。示例1无效

为了提供答案，请进一步解释示例无效的原因以及如何修复。例如，说明如何在那里设置数据api密钥，或者如果您认为这是解决问题的方法，那么是否应该删除该密钥。要提供答案，请进一步解释该示例无效的原因以及如何修复它。例如，说明如何在那里设置数据api密钥，或者如果您认为这是解决问题的方法，那么是否应该删除该密钥