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

Question

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

Script.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>
...

当我点击代码中生成的link时，出现错误

TypeError: app.goToTicket is not a function at HTMLAnchorElement.onclick

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

关于我遗漏的任何想法？

谢谢，

Answer 1

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

Answer 2

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

Script.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
    },
}

当我点击链接时函数被正确调用

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

Dynamically add imported function call to onclick

javascript

zendesk-app