IEのjQueryツールチップの位置付け問題

Question

私はIEに何か驚きがあります。私は自分のページに問題報告機能（レポート悪いイメージ...）を作成しています。私はいくつかの質問（報告する理由...）と 'このイメージを報告する'シンプルなフォームを表示したい。レポート画像をクリックした後に表示されます。これはFFでもChromeでも完璧に動作しますが、IEには問題があります。 Divはマウスのクリック位置に表示する必要があります。最初は適切な場所に表示されますが、ページをリロードせずに別のレポート画像をクリックすると（サイトにはさらに多くのレポート画像があります）、最初に表示された同じ場所に再び表示されます）。 は、ここに私のコードです：

$(document).ready(function(){ 
    $(".proofreporter").click(function(e){ 
    $('.popup').remove(); //used to remove previously shown elements 

    $.ajaxSetup ({ 
    // Disable caching of AJAX responses 
     cache: false 
    }); 


    // setTimeout(function(){$('.popup').remove()},2000); 

    var name = $(this).attr('id'); 
    function showData(data) { 
     $("body").append(data); 
    } 
    //x = e.pageX; first I tried this to get position but same result 
    //y = e.pageY; 

    var pos = $(this).offset(); 
    x=pos.left; 
    y=pos.top; 

    alert(x + 'x' + y); 
    $.get('includes/reporter.php?reportimgdiv=' + name + '&x=' + x + '&y=' + y, showData); 
    }); 
}); 

そして、ここで解決しようreporter.php

if(isset($_GET['reportimgdiv'])) 


{  //report IMAGE 
    ?> 
    <style type="text/css">                                
    .popup {   //SOLVED; change to this: #<?echo report$_GET['reportimgdiv']?> 
    position: absolute; 
    left: <?echo $_GET['x'];?>; 
    top: <?echo $_GET['y'];?>; 
    z-index: 100; 
    width: 280px; 
    } 
    .subtle { 
    margin: 0px; 
    padding: 5px; 
    border: 2px solid gray; 
    font-size: small; 
    text-align: left; 
    background-color: #EEE; 
    color: #444; 
    } 
    </style> 
    <? 
    $imgid=$_GET['reportimgdiv']; 
    ?> 
    <div id="reportForm001" class="popup" style="margin-top: 0em; "> //solved: change id="report<?echo $imgid?>" 
    <!-- 
    <form name="form1" method="post" target="reportframe" action="update/pagereportframe.php" class="subtle" style="position: relative; left: 1em; top: 2px;"> 
    --> 
    <form name="form1" method="post" target="reportframe" action="includes/reporter.php" class="subtle" style="position: relative; left: 1em; top: 2px; background-color: white" >  
    <input name="id" type="hidden" value="<?echo $imgid; ?>"> 
    <div style="position: absolute; right: 1em; font-size: x-small"><a href="#" onClick="jQuery('.popup').remove();">CLOSE [X]</a></div> 
    <h3>What is wrong with this image? <?echo $_GET['x'];?> X <?echo $_GET['y'];?> </h3> 
    <input type="radio" name="reason" value="1"> BLAH BLAH/b>. <br> 
    <input type="radio" name="reason" value="2"> BLAH BLAH/b>. <br> 
    <br>Comment (optional):<br> 
    <textarea name="comment" rows="3" style="width: 100%"></textarea><br> 
    <input value="Submit" type="submit"> 
    </form> 
    </div> 
<? 
    } 

Answer 1

私は今、IDを使用します（代わりに、クラスの）ポップアップdiv要素を識別するためのコードです。 reporter.phpコードのコメントmore info