如何将 onClick 与动态生成的 div 与 dojo 相关联？答案

【问题标题】：How to associate onClick with a dynamically generated div with dojo?如何将 onClick 与动态生成的 div 与 dojo 相关联？
【发布时间】：2014-03-10 20:36:11
【问题描述】：

我正在使用 dojo 1.9.2，并试图在我动态创建的一段 HTML 代码上附加一个 onClick 函数，如下所示：

clickableDiv = "<div data-dojo-attach-point=\"testBtn\">Click Me!</div>";
self.racks.innerHTML = clickableDiv;

然后我想给它一个onClick函数，所以就在我放的代码下面：

connect(this.testBtn, "onclick", alert("You Clicked It!"));

由于某种原因，这不仅不起作用，当我刷新页面时，警报“你点击了它！”无需我点击任何内容就会弹出...

我必须使用这个 dojo 版本，这是要求的一部分... 关于我该如何做这件事有什么想法或建议吗？

【问题讨论】：

感谢大家的帮助，所有解决方案都很好用！它真的帮了我很多。现在我不知道选择什么答案作为解决方案，因为它们都同样有帮助......

标签： javascript html dojo

【解决方案1】：

好吧，dojo 是 javascript 的一部分，所以你大概可以使用一些 javascript 函数，例如：

clickableDiv = "<div id=\"testBtn\">Click Me!</div>";
self.racks.innerHTML = clickableDiv;
document.getElementById('testBtn').onclick=function(){alert("You Clicked It!");};

【讨论】：

我的项目的设置方式是基本页面 (HTML) 与 dojo 文件没有任何关联，并且是积极修改基本页面的 dojo 文件......如果我使用基本的 javacript 代码，我还能调用不属于 javascript 的自制函数，如“alert”吗？
我会选择你的解决方案，因为我最终使用了这个解决方案，但其他所有人，非常感谢！

【解决方案2】：

问题中提到的代码是正确的，除了一个错误。 “onclick”事件需要一个处理函数，而不是直接的代码。因此，请用函数将警报语句括起来。

connect(this.testBtn, "onclick", function(){alert("You Clicked It!")});

或者一个单独的函数可以在这里链接一个句柄通过传递函数或只是函数的名称。

function abcd() {
 alert('You clicked It');
}
connect(this.testBtn, "onclick", "abcd");//same as connect(this.testBtn, "onclick", abcd);

【讨论】：

【解决方案3】：

当提供事件处理程序（或一般的回调）时，您必须提供函数作为参考。使用时：

connect(this.testBtn, "onclick", alert("You Clicked It!"));

您实际上是说要将onClick 事件处理程序连接到alert() 的返回值。您真正想要的就像已经通过将其包装在通过引用传递的函数中来解释的其他答案一样：

connect(this.testBtn, "onclick", function() {
    alert("You Clicked It!")
});

但是，由于您使用的是小部件中通常使用的data-dojo-attach-point，因此您也可以以类似的方式定义您的事件处理程序，例如：

clickableDiv = "<div data-dojo-attach-point=\"testBtn\" data-dojo-attach-event=\"onClick: myClickHandler\">Click Me!</div>";

然后您可以在您的小部件中编写一个名为myClickHandler 的函数来显示警报，例如：

myClickHandler: function() {
    alert("You Clicked It!");
}

【讨论】：

【解决方案4】：

他正在使用 dojo 1.9.2。 connect 已被弃用，他应该使用 on:

on(this.testBtn, "click", function(){
    alert("You Clicked It!")
});

您的 data-dojo-attach-point 不会在动态放置的 HTML 中被拾取。您可以将其放在自定义小部件模板中，以提供对您的节点/小部件的实际引用。如果您在模板中确实有该元素，您可以简单地在您的元素上使用该属性：

data-dojo-attach-event="onClick: someFunction"

【讨论】：