domConstruct.create 之后的 dojo 方法

Question

我的问题是在刚刚创建的元素上显示工具提示（根据从数据库中提取的数据）。我需要更新它的内容（我还没有成功完成）并在鼠标悬停和鼠标离开时设置一个事件。

代码如下：

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

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

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

示例：jsfiddle

Answer 2

在这种情况下，在您的情况下使用 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

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 之后的 dojo 方法

dojo on method after a domConstruct.create

javascript

dojo

tooltip