Question

我有一个嵌套的gridview，当悬停在行A 中的图像时，第一次页面加载没有弹出窗口，但是第二次将图像悬停在行A 中的正确信息弹出窗口。

另一个问题是，当我将鼠标悬停在行B 上的图片后，将行A 的详细信息弹出<来自第A行的强>第B行，但当我第二次在第B行上方时，会弹出正确的详细信息。

我非常感谢对此问题的任何帮助，因为我一直试图解决它。

The JSFIDDLE link is below as a demonstration

Answer 1

这是解决问题的方法

  $('img.imagepopupcontext').hover(function (e) {
          // Begin mouseover function

            // Grab the p tag with the id of 'dbInfo' in order
            // to retrieve information from it later
            var cvalue = $(this).parent().parent().attr('id'); //tr.innerGridRow parent

            count++;
            //$('#ctl00_ContentPlaceHolder1_txtcontextkey').val(cvalue);
            //$('#ctl00_ContentPlaceHolder1_btnmodalclick').click();

           // var img = $(this);

            $.ajax({url:'callbackdynamicdata.aspx',context:this,data:({ ID: cvalue}),success:
               function(data){

                    var html = '<div id="infopathpanel">';
                    html += data;
                    html += '</div>';
                    // Append the variable to the body and the select
                    // itself and its children and hide them, so you
                    // can then add a fadeIn effect.

                    $('body')
                        .append(html)
                            .children('#infopathpanel')
                            .hide()
                            .fadeIn(400);


                    // This is where the popup offesets away from your cursor
                    // The variables set up top will decide how far away the
                    // pop up strays away from your cursor.
                    var pos = $(this).offset();

                    $('#infopathpanel').css({
                        position: "absolute",
                        top: (pos.top - 170) + "px",
                        left: (pos.left - 310) + "px",
                        'background-color': '#ffffcc',
                        'width': '300px',
                        'border-color': '#060F40',
                        'border-width': '2px',
                        'color': '#060F40'

                    });               

               }})

Answer 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var offsetY = -20;
            var offsetX = 40;
            var html = '<div id="info" class="InfoMessage"><h4>Info here </h4><p></p></div>';
            $(html).hide().appendTo('body');

            $('img.imagepopupcontext').hover(function (e) {
                $('div.InfoMessage').hide().find('p').text($(this).data('message'));
                $('div.InfoMessage').fadeIn(400);
                $('div.InfoMessage').css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
            }, function () {
                $('#info').hide();
            });

            $('img.imagepopupcontext').mousemove(function (e) {
                $('div.InfoMessage').css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
            });
        });
    </script>
    <style type="text/css">
        #info
        {
            background: #7F7777;
            width: 300px;
            padding-bottom: .5em;
            padding-right: 15px;
            overflow: hidden;
            position: absolute;
        }
    </style>
</head>
<body>
    <table border="1" bgcolor="skyblue">
        <tr>
            <td>
                in progress
            </td>
            <td>
                Sale
            </td>
        </tr>
        <tr>
            <td>
                in progress
            </td>
            <td>
                <table border="1" bgcolor="orange">
                    <tr>
                        <td>
                            inner table a
                        </td>
                        <td>
                            inner table2 A
                        </td>
                        <td>
                            <img class="imagepopupcontext" src="http://cdn1.iconfinder.com/data/icons/SOPHISTIQUENIGHT/mail_icons/png/16/pop_documents.png"
                                data-message="Show dynamic information A a" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            inner table b
                        </td>
                        <td>
                            inner table2 B
                        </td>
                        <td>
                            <img class="imagepopupcontext" src="http://cdn1.iconfinder.com/data/icons/SOPHISTIQUENIGHT/mail_icons/png/16/pop_documents.png"
                                data-message="Show dynamic information B b" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <div id="divshowpopup">
        <p id="dbInfo">
        </p>
    </div>
</body>
</html>

在嵌套网格视图中获取有关图像鼠标悬停的动态详细信息

2 个答案: