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

Question

I am using Jquery UI Tooltip Widget to generate a tooltip which in turn sends an AJAX request to fetch data from the server. I am trying to bind an element generated dynamically through the AJAX request using Jquery .on()

However, it works only half the time.

I have found some similar questions but they deal with Bootstrap tooltip which is completely different.

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

You can reinitialize tooltip plugin after dynamically added items.

 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();
                });
            });
         }
        };

Call this once for initialization and when you append any element dynamically

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