Question

我正在格式化datagrid中的一些工具提示，一切正常，直到我使用Ajax调用转到下一页。这是我正在使用的基本代码。我想我应该在＆＃34;上使用＆＃34;但是有几次尝试都没有奏效。我假设这是一个基本的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');

（编辑：从.on调用中移除最后一个函数。请参阅：http://api.jquery.com/on/#on-events-selector-data）

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

2 个答案: