带有回调悬停的jQuery工具提示更多工具提示显示错误的内容

时间:2020-01-08 12:51:09

标签: javascript jquery jquery-ui callback jquery-ui-tooltip

我有一个包含多行和多列的html表。

<table>
  <tr>
    <td id="td1" class="my_tooltip"></td>
    <td id="td2" class="my_tooltip"></td>
    <td id="td3" class="my_tooltip"></td>
  </tr>
</table>

使用Jquery UI-工具提示,每个td元素应使用以下逻辑加载不同的工具提示数据:

 $(".my_tooltip").tooltip({
    content:  function() {
      //display loading icon gif
      return $('#tooltip_loading').html();
    },
    open: function( event, ui ){
        var elem = $(this);
        var id = elem.attr('id');

        var el_tooltip_id = 'tooltip_' + id;
        var el_tooltip    = '#' + el_tooltip_id;

        // Logic for caching tooltip content
        if ($(el_tooltip).html() === undefined) {
          // Tooltip content not rendered yet - create a new one 
          $("<div/>").attr('id', el_tooltip_id).appendTo($('#tooltips_container'));
          $(el_tooltip).load("backend_call_with_parameter&id=" + id, function() {
            elem.tooltip('option','content',$(el_tooltip).html());
           }
          )
        } else {
            // Tooltip content found - display it
            elem.tooltip('option','content',$(el_tooltip).html());
          }
        }
    }
 });
}

基本上,它适用于单个回调。

但是,当用户快速将鼠标悬停在2个或更多元素上时(会调用更多回调)。回调输出中可能会有延迟,并且用户用鼠标悬停的所有工具提示元素都填充有最后一个回调输出。

0 个答案:

没有答案