dojo on метод после domConstruct.create

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

По-видимому, на метод не работает:

Не удалось получить значение свойства на: объект является нулевым или не определено

У меня также было несколько проблем с созданием дважды того же идентификатора из-за того, что интерфейс обновился.

У вас есть представление, как я мог бы сделать эту работу?

Answer 1

Попробуйте добавить свойство id к вашим элементам p.

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

Пример: jsfiddle

Answer 2

В данном случае это usless использовать data-dojo-attach-point в вашем случае, потому что это последняя работа после додзё синтаксического анализа выполняется и прикрепить каждый elment к своему шаблону; так просто добавить идентификатор и ATACH событие непосредственно генерируемой Пункт:

Выше рабочего примера

require(["dojo/dom-construct","dojo/dom","dojo/on","dojo/parser","dojo/ready"],function(domConstruct,dom,On,parser,ready){ 
 
\t \t ready(function(){ 
 
    \t for(i=0;i<5;i++) { 
 
     \t 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);