如何绑定在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);