如何绑定在Jquery UI工具提示中动态生成的元素

Question

我正在使用Jquery UI工具提示小部件生成工具提示，该工具提示又发送AJAX请求以从服务器获取数据。 我正在尝试使用Jquery .on()绑定通过AJAX请求动态生成的元素。

但是，它只能工作一半时间。

我发现了一些类似的问题，但是它们处理的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);