使用渲染函数时节点上的事件未调用该函数答案

【问题标题】：Event on node not calling the function when using the render function使用渲染函数时节点上的事件未调用该函数
【发布时间】：2022-10-15 02:53:21
【问题描述】：

我正在尝试渲染动态图表，因此需要使用 mermaid.render 函数。但是当代码不是以静态方式输入时，使用click 不起作用，正如您在下面的 sn-p 中看到的那样：

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>

<script>
  mermaid.initialize({
    theme: "base",
    startOnLoad: false,
    securityLevel: 'loose'
  });
</script>

<p onclick="CreateGraph()">CreateGraph</p>
<div class="mermaid"></div>

<script>
  var CreateGraph = function() {
    var gdata = `
            flowchart 
             a-->b
             click a callback
            `;
    var div = document.getElementsByClassName("mermaid")[0];
    mermaid.render("graphDiv", gdata, (svgCode, bindFunctions) => {
      div.innerHTML = svgCode;
    });
  };
  var callback = function() {
    alert('A callback was triggered');
  };
</script>

但是，如果您要将 gdata 的内容直接放入美人鱼 div 中（以及将 startOnLoad 设置为 true），那么一切都会按预期工作。

有没有人知道正在发生的事情或修复？

谢谢！

【问题讨论】：

标签： mermaid

【解决方案1】：

选择。使用 href 将函数调用包含在参数中。

var gdata = `
            flowchart 
             a-->b
             click a href "javascript:callback();"
            `;

【讨论】：