javascript - 动态添加导入的函数调用到 onclick

Question

我有一个脚本可以加载信息并使用它来添加对链接的 onclick 调用。我认为举个例子会更清楚：

脚本.js

const app = {

   init: function() {
     ...
     var link = document.createElement("a");
     link.setAttribute("onclick", "goToTicket(" + data.tickets[i].id +');');
     link.setAttribute("href", "javascript:void(0);");
     link.innerHTML = "Ticket " + data.tickets[i].id;
     cell1.appendChild(link);
   },

    ...

    goToTicket: function(ticketId){
       //Some code
    },
}

Sidebar.js

import app from './script.js';
...

iframe.html

...
<script type="module" src="lib/javascripts/ticket_sidebar.js"></script>
...

当我单击代码中生成的链接时，出现错误

TypeError：app.goToTicket 不是 HTMLAnchorElement.onclick 的函数

我尝试了不同的方法，例如直接在 Sidebar.js 中添加 goToTicket，但我可以让它运行。

关于我所缺少的任何想法？

谢谢，

Answer 1

最终最终使用了 jQuery。下面是 script.js 现在的样子：

脚本.js

const app = {

   init: function() {
     ...
     var link = document.createElement("a");
     link.setAttribute("href", "javascript:void(0);");
     link.innerHTML = "Ticket " + data.tickets[i].id;
     link.className = "ticket " +  data.tickets[i].id;
     $(document).on("click",".ticket."+data.tickets[i].id, data.tickets[i].id,app.goToTicket);
     cell1.appendChild(link);
   },

    ...

    goToTicket: function(ticketId){
       //Some code using ticketId.data
    },
}

当我单击链接时，该函数被正确调用

Answer 2

您可以尝试添加 module.exports = app; 底部文件 Script.js