事件，当使用呈现函数时，节点不调用该函数。

Question

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

​

<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)，那么一切都将如预期的那样工作。

有没有人知道发生了什么，或者有什么解决办法？

谢谢!

Answer 1

Alternative.使用href在参数中包含函数调用。

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