關於通過AJAX請求生成的元素懸停的工具提示

我想在使用AJAX動態生成的容器的懸停上使用Tooltipster插件添加工具提示。我在這方面遇到了極其困難的時刻，並且一直試圖解決這個問題好幾天了。注意：我沒有收到任何錯誤，Tooltipster正在處理非ajax元素。關於通過AJAX請求生成的元素懸停的工具提示

我很感激任何有關如何實現這一點的建議。

非常感謝提前！

的JavaScript/AJAX調用

$.ajax({ 
      url: "get-data.php?bestItems=1", 
      dataType: "html", 
      success: function(data){ 
       $(".best-items-container").html(data).show(); 
      } 
     });

工具提示初始化/事件

  $('.best-item-option').tooltipster({ 
      custom: 'hover', 
      onlyOne: true, // allow multiple tips to be open at a time 
      position: 'left', // display the tips to the left of the element 
      theme: '.my-custom-theme' 
     }); 
     $(document).on('hover', '.best-item-option', function(){   
      $('.best-item-option').tooltipster('show'); 
     });

動態HTML片段（PHP）

<div class="best-items-container"> 
    <div class="best-item-option" title="Testing Tooltip"> 
     <div class="hotItemName">'. $data['name'][$i].'</div> 
    </div> 
</div>

來源

2013-04-17 AnchovyLegend

把你的初始化代碼在一個單獨的功能：

function initTooltipster(){ 
..the init code here.... 
}

，然後在回調函數（「成功」的一部分）添加一行initTooltipster()

編輯：由於晝夜提到的，這可能有一些性能問題，但它非常簡單，所以只是嘗試，如果一切正常，嘗試將tooltipster綁定到特定元素...

來源

2013-04-17 12:38:51

的問題是，tooltipster尚未被初始化爲動態添加元素。

一個解決辦法是

$(document).on('hover', '.best-item-option', function(){   
    $('.best-item-option').tooltipster(); 
    $('.best-item-option').tooltipster('show'); 
});

但如果你有很多.best-item-option元素，這將是低效的，因爲它會再次綁定tooltipster（我認爲）。最好使用id並將其僅添加到新元素。

來源

2013-04-17 12:31:42

關於通過AJAX請求生成的元素懸停的工具提示

回答

相關問題