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方法不起作用：

无法获取属性的值：object为null或undefined

由于界面刷新本身，我也有几次创建两次相同id的问题。

你知道我如何才能做到这一点吗？

Answer 1

在这种情况下，在你的情况下使用data-dojo-attach-point是没用的，因为在执行dojo解析器之后的最后一项工作并将每个元素附加到它的模板上; 所以只需将id和atach事件直接添加到生成的Item：

以上工作示例

＆＃13;

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

＆＃13;

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

＆＃13;

Fiddle Here

Answer 2

尝试将id属性添加到p元素中。

domConstruct.create('p', { id:'tooltipExample' + tooltipIndex,'innerHTML': myValue}, this.myNode)

例如：jsfiddle

Answer 3

您可以将其置于循环中并根据需要命名。在这种情况下，spa（this.spa）是附加点。

this.spa = domConstruct.create("p", {
                   innerHTML: "Lorem ipsum",
                   style: "color: blue;",
                   onclick: function(){
                      console.log(this.innerHTML); // print -> Lorem ipsum
                      this.innerHTML = "change content";
                   },
                   onmouseenter: function(){
                      this.style = "color: green;"
                   },
                   onmouseout: function(){
                      this.style = "color: blue;"
                   }
                });
                domConstruct.place(this.spa, this.domNode);

在domConstruct.create

3 个答案: