javascript - domConstruct.create 之后的 dojo on 方法

Question

我的问题是在刚刚创建的元素上显示工具提示(从数据库中提取的数据)。我需要更新其内容(我尚未成功完成)并在 mouseover 和 mouseleave 上设置事件。

这是代码:

// in for loop
domConstruct.create('p', {'data-dojo-attach-point':'tooltipExample' + tooltipIndex,'innerHTML': myValue}, this.myNode);

// on each tooltipExample element:
on(this.tooltipExample1, "mouseover", lang.hitch(this, function (evt) {
    // open popup
}));
on(this.tooltipExample1, "mouseleave", lang.hitch(this, function (evt) {
    // close popup
}));

显然，on 方法不起作用:

Unable to get value of the property on: object is null or undefined

由于界面会自行刷新，我在创建两次相同的 id 时也遇到了好几次问题。

你知道我如何才能完成这项工作吗？

Answer 1

在这种情况下，在您的情况下使用 data-dojo-attach-point 是没有用的，因为执行 dojo 解析器并将每个元素附加到其模板之后的最后一项工作；因此只需将 id 和 atach 事件直接添加到生成的 Item 即可:

上面是一个工作示例

require(["dojo/dom-construct","dojo/dom","dojo/on","dojo/parser","dojo/ready"],function(domConstruct,dom,On,parser,ready){
		ready(function(){
    	for(i=0;i<5;i++) {
      	var elment = domConstruct.create('p', {'id':'tooltipExample'+i,'innerHTML': "parag "+i}, "container");
        console.log(elment);
        On(elment, "mouseover", function (evt) {
            console.log("mouse over ",evt.target.id);
            dom.byId("event").innerHTML = "mouse over "+this.id;
        });
        On(elment, "mouseleave", function (evt) {
            console.log("mouse leave ",evt.target.id);
            dom.byId("event").innerHTML = "mouse leave "+this.id;
        });
      }
    });
});

<script type="text/javascript">
  dojoConfig = {isDebug: true, async: true, parseOnLoad: true}
</script>

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet"/>
<div id="container"></div>
<br>
<strong><div id="event" style="color:red"></div></strong>

Fiddle Here