Javascript 对小胡子模板中的单击事件执行函数

我有一个页面是由一个mustache模板（以及javascript和jquery）驱动的，我不知道如何在这个模板中插入函数。基本上，我想要的是在用户单击执行函数“

onTaskSelected（taskId）

”的页面上添加一个链接或按钮。几天来，我一直在寻找实现这一目标的方法，但很难找到大量的胡须文档/支持/示例。有人知道如何做到这一点吗

编辑-以下是我尝试过的一些代码：

data["B" + task.taskId] = {
    changeTask : function(taskId) {
        var self = this;
        self.onTaskSelected(taskId);
    },
    taskId : task.taskId
};

数据将加载到mustache模板中，其中包含以下内容：

<button onClick="{{#B8.changeTask}}B8.taskId{{/B8.changeTask}}">Change to task 8</button>

更改为任务8

我已经调试了代码，将数据发送到模板以转换为html，B8已经正确设置了changeTask和taskId。但是，在显示html时，按钮如下所示：

<button onclick>Change to task 8</button>

更改为任务8

为什么onclick会被破坏，我如何修复它？它不需要是一个按钮，但我需要在页面上有一个可点击的元素

更新：此后，我更新了我的模板，如下所示：

<button onClick="{{#B8}}{{#changeTask}}8{{/changeTask}}{{/B8}}">Change to task 8</button>

更改为任务8

---

显然，为了访问“

B8

”对象中的变量，我需要嵌套数据模板。然而，现在我遇到的问题是，当它从模板创建html时，它试图执行“

changeTask

”函数。我怎样才能让它等待执行，直到我点击按钮？

终于让它工作了，但我最终选择了一条完全不同的路线。我想把它贴在这里，以防其他人也有同样的问题。我格式化了mustache以给按钮命名，而不是尝试插入onClick方法，然后使用jquery循环遍历DOM中该部分的每个按钮，并向具有正确名称的按钮添加onClick方法

编辑：从技术上讲，我还将我的按钮更改为链接，我将在下面的代码中显示，但它也适用于按钮

模板：

<a name="{{{B8}}}">Change to task 8</a>

---

希望这对其他人有帮助。

虽然您自己的答案本质上是正确的，但使用jQuery有一个更容易选择的选项：

$(link+'[name|="'+buttonData[B8].name+'"]')

希望这对你将来有所帮助

---

顺便说一句-我自己仍在寻找原始问题的解决方案…

是的，在我写上面的答案时，我不知道选择器的形式，但我会更新它，谢谢。如果你面临着与OP相同的问题，我认为你最好按照我在答案中公布的路线走，很可能。

$(link+'[name|="'+buttonData[B8].name+'"]')