2017-02-09 7 views
0

私の問題は、(データベースから抽出したデータから)ちょうど作成された要素にツールチップを表示することです。私はそのコンテンツを更新する必要があります(これはまだ成功していませんでした)、マウスオーバーとマウスの離脱時にイベントを設定する必要があります。ここで doConstruct.createの後のメソッドのdojo

コードです:どうやら

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

、この方法では動作しません:

のプロパティの値を取得することができません:オブジェクトがnullまたは未定義である

また、同じIDを2回作成することでインターフェイスがリフレッシュされるため、何度か問題が発生しました。

私はこの作業をどのように行うことができますか?

答えて

0

p要素にidプロパティを追加してみてください。

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

例:jsfiddleそれは道場パーサ後のこの最後の作業が実行されているので、あなたのケースでdata-dojo-attach-pointを使用し、そのテンプレートに各elmentを添付するuslessです。この場合

3

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

0

あなたがループし、名前を付けでこれを置くことができます作業上記の例

: はこれだけ生成された項目に直接idとatachイベントを追加しますあなたが望むように。この場合、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);