Question

我正在使用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版本，这是要求的一部分...... 关于如何做到这一点的任何想法或建议？

Answer 1

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

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

Answer 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);

Answer 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!");
}

Answer 4

他正在使用dojo 1.9.2。不推荐使用connect，他应该使用：

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

您的data-dojo-attach-point将无法在动态放置的HTML中获取。您可以将其放在自定义窗口小部件模板中，以提供对节点/窗口小部件的实际引用。如果您在模板中确实拥有该元素，则只需在元素上使用该属性：

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

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

4 个答案: