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

【问题标题】：How to bind elements generated dynamically within a Jquery UI tooltip如何绑定在 Jquery UI 工具提示中动态生成的元素
【发布时间】：2015-08-29 22:47:58
【问题描述】：

我正在使用 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();
        });
    });
}
});

【问题讨论】：

标签： javascript jquery html ajax

【解决方案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);

【讨论】：