如何綁定在JQuery UI中動態生成的元素工具提示

Question

我正在使用Jquery UI Tooltip Widget生成工具提示，該提示又發送一個AJAX請求以從服務器獲取數據。我試圖綁定一個通過AJAX請求動態生成的元素，使用Jquery .on()

但是，它的工作時間只有一半。

我發現了一些類似的問題，但他們處理的Bootstrap工具提示完全不同。

HTML：

<ul id="carCatalogList"> 
    <li id="1">Car 1</li> 
    <li id="2">Car 2</li> 
    <li id="3">Car 3</li> 
    <li id="4">Car 4</li> 
    <li id="5">Car 5</li> 
    <li id="6">Car 6</li> 
</ul> 

的Javascript：

$('#carCatalogList li').tooltip({ 
items: 'li', 
show: true, 
content: function(callback) { 
    $.post('fetchCar.php', {id: $(this).attr('id')}, function(data){ 
     callback(data); 
    }); 
}, 
position: { my: "center bottom", at: "left-65 top" }, 
open: function(event, ui){ 

    if (typeof(event.originalEvent) === 'undefined') 
    { 
     return false; 
    } 

    var id = $(ui.tooltip).attr('id'); 

    $('div.ui-tooltip').not('#' + id).remove(); 

    $('.carStar').on('click', function(event){ 
     idVal = $(this).attr('data-car'); 
     hrefVal = 'carStar.php?id=' + idVal; 
     $.post(hrefVal, {}, function(data){ 
     $('#' + id).fadeOut(function(){ 
      $(this).remove(); 
      $('#' + idVal).remove(); 
     }); 
     }); 
    }); 
}, 
close: function(event, ui) 
{ 
    ui.tooltip.hover(function() 
    { 
     $(this).stop(true).fadeTo(400, 1); 
    }, 
    function() 
    { 
     $(this).fadeOut('400', function() 
     { 
      $(this).remove(); 
     }); 
    }); 
} 
}); 

Answer 1

您可以動態地添加項目後重新初始化工具提示插件。

var tooltipOptions = { 
     items: 'li', 
     show: true, 
     content: function(callback) { 
      $.post('fetchCar.php', {id: $(this).attr('id')}, function(data){ 
       callback(data); 
      }); 
     }, 
     position: { my: "center bottom", at: "left-65 top" }, 
     open: function(event, ui){ 

      if (typeof(event.originalEvent) === 'undefined') 
      { 
       return false; 
      } 

      var id = $(ui.tooltip).attr('id'); 

      $('div.ui-tooltip').not('#' + id).remove(); 

      $('.carStar').on('click', function(event){ 
       idVal = $(this).attr('data-car'); 
       hrefVal = 'carStar.php?id=' + idVal; 
       $.post(hrefVal, {}, function(data){ 
       $('#' + id).fadeOut(function(){ 
        $(this).remove(); 
        $('#' + idVal).remove(); 
       }); 
       }); 
      }); 
     }, 
     close: function(event, ui) 
     { 
      ui.tooltip.hover(function() 
      { 
       $(this).stop(true).fadeTo(400, 1); 
      }, 
      function() 
      { 
       $(this).fadeOut('400', function() 
       { 
        $(this).remove(); 
       }); 
      }); 
     } 
     }; 

調用此一次初始化，當你添加任何元素動態

$('#carCatalogList li').tooltip(tooltipOptions);