得到嵌套gridview的图像鼠标悬停动态细节

我有一个嵌套的GridView和当行A第一次加载页面没有弹出，在A行正确的信息弹出图像然而第二悬停悬停在图片。得到嵌套gridview的图像鼠标悬停动态细节

的另一个问题是，当我将鼠标悬停在B行图像从A行上空盘旋A行的细节A行弹出的B行后，但是当我将鼠标悬停在行B第二次正确的细节弹出。

我将不胜感激这个问题的任何援助，因为我一直在试图解决它一段时间了。

The JSFIDDLE link is below as a demonstration

2012-05-03 wayne9999

从的jsfiddle样品不从数据库系统具有信息，所以什么我试图将难以充分说明说 – wayne9999

有一个AsyncPostBackTrigger，它触发一个按钮来从代码隐藏中获取信息，从而以这种方式连接到数据库，唯一的问题是，当悬停在不同的图像行时，它会导致我在第上面的问题。 – wayne9999

<!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>

来源

2012-05-04 09:57:11 Thulasiram

为现场演示请参阅此链接：http://jsfiddle.net/nanoquantumtech/FWTKn/ – Thulasiram

上述一个是正确的。或者你将如何获得动态细节？ – Thulasiram

我将得到该行的ID，然后在后面的代码中调用以搜索数据库表中的该ID，然后返回结果并将其放在面板中以显示在悬停弹出窗口 – wayne9999

这是解决问题的办法

$('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' 

        });    

       }})

来源

2012-05-04 20:41:43 wayne9999

得到嵌套gridview的图像鼠标悬停动态细节

回答

相关问题