Dojo Tooltip僅在第一次mousover事件後顯示

Question

我正在使用dojo的事件委託將Tooltip小部件連接到動態生成的dom節點。

道場網站解釋事件代表團是這樣的：

「事件代表團背後的想法是，而不是 監聽器連接到感興趣的每個節點上的事件，您可以將 單監聽器一個更高級別的節點，它將檢查它捕獲的事件的目標是否從實際感興趣的 節點冒泡;如果是，處理程序的邏輯將被執行。

以下是我的代碼實現。它的作品非常漂亮...除了第一個鼠標懸停事件之外，該工具提示僅顯示AFTER。當我第一次將鼠標懸停在節點上時，事件完全觸發，但工具提示不呈現。它只會顯示隨後的鼠標懸停事件。在第一個mouseover事件中，我可以看到Firebug控制檯，並看到xhr.get轉到數據庫並獲取正確的數據。如果我註釋掉工具提示並提交一個簡單的警報（），它就會首次運行。

關於如何讓工具提示顯示在第一個mouseover事件上的任何建議？提前致謝！

<div class="col_section" id="my_groups"> 
    <div class="col_section_label">My Groups</div> 
    <ul> 
    <?php 
     foreach($myGroups as $grp) { 
      echo '<li><a class="myGroupLink" id="grp'.$grp['grp_id'].'">'.$grp['name'].'</a></li>'; 
     } 
    ?> 
    </ul> 
</div> 

<script> 
    require(["dojo/on", 
     "dojo/dom", 
     "dijit/Tooltip", 
     "dojo/_base/xhr", 
     "ready!"], function(on, dom, Tooltip, xhr) { 

    // Get Group ToolTip 
    var myObject = { 
     id: "myObject", 
     onMouseover: function(evt){ 
      var grp_id = this.id; 
      var content = ''; 
      xhr.get({ 
       url: "getGrpInfo.php", 
       handleAs: "json", 
       content: { 
        grp_id: grp_id, 
        content: "tooltip" 
       }, 
       load: function(info) { 
        if(info == 0) { 
         content = '<div class="grpToolTip">'; 
         content += ' Information about this group is confidential'; 
         content += '</div>'; 
        } else { 
         content = '<div class="grpToolTip">'; 
         content += ' <img src="../ajax/getimg.php?id='+info.logo_id+'" />'; 
         content += ' <div style="text-align:center">'+info.name+'</div>'; 
         content += '</div>'; 
        } 

        new Tooltip({ 
         connectId: [grp_id], 
         label: content 
        }); 
       }, 
       error: function() {} 
      }); 
     } 
    }; 
    var div = dom.byId("my_groups"); 
    on(div,".myGroupLink:mouseover",myObject.onMouseover); 
}); 
</script> 

Answer 1

像往常一樣，我過度思考問題，側重於事件註冊，而不是在頁面加載時簡單創建工具提示。所以，這真的太簡單：

1. 查詢節點

2. 迭代通過他們，並創建一個指向每個節點的提示。

   var myGroupsList = query("a.myGroupLink"); // query nodes based on class 
   array.forEach(myGroupsList,function(entry,i){ // iterate through 
   
       var grp_id = entry.id; 
       var content = ''; 
       xhr.get({         // get data via xhr.get 
        url: "getGrpInfo.php", 
        handleAs: "json", 
        content: { 
         grp_id: grp_id, 
         content: "tooltip" 
        }, 
        load: function(info) { 
         if(info == 0) { 
          content = '<div class="grpToolTip">'; 
          content += ' Information about this group is confidential'; 
          content += '</div>'; 
         } else { 
          content = '<div class="grpToolTip">'; 
          content += ' <img src="../ajax/getimg.php?id='+info.logo_id+'" />'; 
          content += ' <div style="text-align:center">'+info.name+'</div>'; 
          content += '</div>'; 
         } 
   
         new Tooltip({      // create tooltip 
          connectId: [entry.id], 
          label: content 
         }); 
        }, 
        error: function() {} 
       }); 
   }); 
   

Answer 2

你Tooltip第一onmouseover不顯示，因爲它不會在目前的onmouseover事件被觸發存在。

dijit/Tooltip實例管理他們的鼠標事件本身，所以你不必管理onmouseover/onmouseout，你可能這樣做是因爲你不想預加載數據，或者您希望每次的提示是要告訴時間來加載數據。

除了dijit/Tooltip情況下，你可以使用Tooltip.show(innerHTML, aroundNode, position)和Tooltip.hide(aroundNode)顯示工具提示，但在這種情況下，你必須自己管理的鼠標事件，這是你所需要的，因爲從UX的角度來看，你不希望顯示單提示，你想：

1. 顯示工具提示指示信息正在加載。

2. 然後：

   • 顯示XHR加載信息，如果用戶仍懸停在節點
   • 取消XHR和隱藏工具提示上mouseout

下面是工作示例：http://jsfiddle.net/phusick/3hmds/

require([ 
    "dojo/dom", 
    "dojo/on", 
    "dojo/_base/xhr", 
    "dijit/Tooltip", 
    "dojo/domReady!" 
], function(
    dom, 
    on, 
    xhr, 
    Tooltip 
) { 

    on(dom.byId("groups"), ".group-link:mouseover", function(e) { 
     var target = e.target; 
     Tooltip.show("Loading...", target); 

     var def = xhr.post({ 
      url: "/echo/html/", 
      content: { html: target.textContent}, 
      failOk: true, 

      load: function(data) { 
       Tooltip._masterTT.xhr = null; 
       Tooltip._masterTT.containerNode.innerHTML = data; 
       Tooltip._masterTT.domNode.width = "auto"; 
      }, 
      error: function(e) { 
       if (e.dojoType != "cancel") { 
        console.error(e); 
       } 
      } 
     }); 

     Tooltip._masterTT.xhr = def;    
    }); 

    on(dom.byId("groups"), ".group-link:mouseout", function(e) { 
     var target = e.target;   
     Tooltip.hide(target); 
     if (Tooltip._masterTT.xhr) { 
      Tooltip._masterTT.xhr.cancel(); 
     } 
    });  
});​