如何在Ajax调用后保留工具提示格式

Question

我正在格式化datagrid中的一些工具提示，并且一切正常，直到我使用Ajax调用进入下一页。这是我正在使用的基本代码。我认为我应该使用“打开”，但有几次尝试的效果并不好。我假设这是一个基本的jQuery答案，但如果需要，我也可以发布Ajax分页代码。

<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script> 
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> 
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> 



    <style type='text/css'> 
    .ui-tooltip {  
     padding: 10px 20px; 
     border-radius: 20px; 
     font: bold 14px"Helvetica Neue", Sans-Serif; 
     font-size: 0.75em; 
     box-shadow: 0 0 7px black; 
     width:210px; 
     z-index:1000; 
    } 
    .ui-tooltip.PE { 
     color: #000000; 
     background: #E680B2 !important; 
    } 
    .ui-tooltip.PC { 
     color: #000000; 
     background: #B2D1FF; 
    } 
    .ui-tooltip.PU { 
     color: #000000; 
     background: #7A0099; 
    } 

     </style> 


<script type='text/javascript'> //<![CDATA[ 
    $(function() { 
     $('td.tips').each(function() { 
      var style = $(this).data('info'); 
      $(this).tooltip({ 
       content: function() { 
        return '<em>' + $(this).attr('title') + '</em>'; 
       }, 
       tooltipClass: style, 
       show: "slideDown", 
       open: function(event, ui) { 
        ui.tooltip.hover(function() { 
         $(this).fadeTo("slow", 0.5); 
        }); 
       } 
      }); 
     }); 

    }); //]]> 

</script> 

HTML代码将是这样的：

<table border="1"> 
<tr> 
    <td title="(Incomplete P/N, Wrong P/N, Invalid P/N, etc...)" data-info="PC" class="tips"><span id="grdNoGoods_ctl12_lblBuyerComments">10/16/2014 - Req to be cancelled per PC</span></td> 
<td title="test1" class="tips" data-info="PE">John Black</td> 
<td title="test2" class="tips" data-info="PU">John Black</td> 
</tr> 
<tr> 
       <td colspan="3"> 
<table border="0"> 
        <tr> 
         <td><b>Page Size: </b><select name="grdNoGoods$ctl15$ctl01" onchange="javascript:setTimeout('__doPostBack(\'grdNoGoods$ctl15$ctl01\',\'\')', 0)"> 
          <option selected="selected" value="10">10</option> 
          <option value="25">25</option> 
          <option value="50">50</option> 
          <option value="75">75</option> 
          <option value="100">100</option> 
          <option value="150">150</option> 
          <option value="200">200</option> 

         </select></td><td><span>1</span></td><td><a href="javascript:__doPostBack('grdNoGoods','Page$2')">2</a></td><td><a href="javascript:__doPostBack('grdNoGoods','Page$3')">3</a></td><td><a href="javascript:__doPostBack('grdNoGoods','Page$4')">4</a></td><td><a href="javascript:__doPostBack('grdNoGoods','Page$5')">5</a></td><td><a href="javascript:__doPostBack('grdNoGoods','Page$6')">6</a></td><td><a href="javascript:__doPostBack('grdNoGoods','Page$7')">7</a></td><td><a href="javascript:__doPostBack('grdNoGoods','Page$8')">8</a></td><td><a href="javascript:__doPostBack('grdNoGoods','Page$9')">9</a></td> 
        </tr> 
</table> 
</tr> 
</table> 

Answer 1

探索我以前的答案，我意识到，解决办法是行不通的在你的情况。原因是.tooltip()在第一次调用时没有实际显示工具提示。

实际上，您现在发布的代码没有任何问题。问题可能在于你的ajax代码。既然你没有发布你的ajax代码，我只是假设你没有这样的东西，并给你我提出的完整解决方案。

这里是一个简化的形式。请使用您的&代码查看this jsFiddle的工作解决方案。

简而言之，您需要一个将tooltip属性添加到元素的函数。然后，您将在初始页面加载和ajax回调中每次连续加载新元素时运行该函数。

var setupTooltip = function (tooltippy_thing) { 
    // Configure tooltips according to the style in your old code. 
    tooltippy_thing.tooltip(...); 
}; 

$(function() { 
    // Apply the tooltip formatting to all the td.tips on page. 
    $('td.tips').each(function() { 
     setupTooltip($(this)); 
    }); 
}); 

var ajax_callback = function (ajax_html) { 
    // Replace the table rows with the new ajax ones. 
    $('table').html(ajax_html); 

    // Apply the tooltip formatting to the new td.tips. 
    ajax_html.find('td.tips').each(function() { 
     setupTooltip($(this)); 
    }); 
}); 

Answer 2

如果你的Ajax调用加载新td.tips元素到页面上，这些元素将不会被载入为你指定的jQuery的事件处理程序。为了解决这个问题，不要将工具提示功能附加到每个现有的td.tips元素，而是要将其附加到页面上始终存在的元素 - 可能是<body>或<table>本身。在.on方法中，请确保放置一个选择器，只选择要显示工具提示的元素。

换句话说，这样的事情：

$('body').on({ 
    mouseenter: function() { 
     // show the tooltip 
    }, 
    mouseleave: function() { 
     // hide the tooltip 
    } 
}, 'td.tips'); 

（编辑：移除的最后一个从。对呼叫功能请参见：http://api.jquery.com/on/#on-events-selector-data）