Question

我有一個使用Ajax自行更新的日曆。這看起來幾乎是瞬間發生的 - 從十一月份到十二月份這樣快速地切換，以至於看不到開關。下面是這樣做的代碼 - 它恰好通過PHP包含在頁面中，因此腳本位於文檔中間。 （我沒有寫這個劇本）

<script type="text/javascript"> 
    var homegraphurl = '?content_type=plugin&block_id={$block_id}&date='; 
    if (document.all) { 
     this.homegraphxml = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    if (!this.homegraphxml && typeof XMLHttpRequest != 'undefined') { 
     try { 
      this.homegraphxml = new XMLHttpRequest(); 
     } catch (e) { 
      this.homegraphxml = false; 
     } 
    } 
    function homegraphcal_load(date) { 
     this.homegraphxml.open("GET", homegraphurl + date, true); 
     this.homegraphxml.onreadystatechange = function() { 
      if (homegraphxml.readyState == 4) { 
       calElem = document.getElementById('homegraphcal'); 
       calElem.innerHTML = homegraphxml.responseText; 
      } 
     }; 
     this.homegraphxml.send(null); 
    } 
    homegraphcal_load('2013-12-01'); 
</script> 

然後還有的頁面，該頁面顯示了剛剛結束標記之前在另一個腳本，即增加了懸停引導popovers以下鏈接日曆（我沒有寫這個劇本）

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $(document).on("hover","a.evtday",function(g){ 
      $(this).popover({ 
       html: true, 
       animation: false, 
       trigger: 'hover', 
       placement: 'top', 
       content: function(){return '<img class="popsmall" src="'+ $(this).data('img') + '" /><br/><span class="winner">Winner: '+ $(this).data('item') + '</span>';} 
      }); 
     }); 
    }); 
</script> 

問題是，您第一次將鼠標懸停在鏈接上時，彈出窗口不會出現。但是，之後它就像一個冠軍一樣。這是什麼原因？它如何解決？我懷疑答案與腳本被調用時的順序有關，以什麼順序，但我不知道如何解決這個問題。

Answer 1

您需要使用mouseenter事件。

另外問題是，當第一個mouseenter完成彈出窗口小部件尚未初始化。該解決方案可以是手動觸發酥料餅一旦被初始化

$(document).on("mouseenter", "a.evtday", function (g) { 
    var $this = $(this); 
    if ($this.data('bs.popover')) { 
     return; 
    } 
    $(this).popover({ 
     html: true, 
     animation: false, 
     trigger: 'hover', 
     placement: 'right', 
     content: function() { 
      return '<img class="popsmall" src="' + $(this).data('img') + '" /><br/><span class="winner">Winner: ' + $(this).data('item') + '</span>'; 
     } 
    }).popover('show'); 
}); 

演示：Fiddle