jQueryのポップアップウィンドウ

Question

何とか動作していたコードがありましたが、スクリプトを書き直そうとすると突然ポップアップウィンドウのXとYの位置が間違っていました。 これが最初の問題です。

次の問題は、このコードがかなり悪いことです。なぜなら私はポップアップウィンドウを表示するときにいつもいくつかのバグがあるからです。説明するのは難しいですが、コードをよく見てみるとよいでしょう。

主なものは次のとおりです。マウスの動きが起きたときに要素を持っている（画像を言う）マウスがウィンドウの上にあるときにウィンドウを表示する必要があります。別の言葉 - 私はそのウィンドウからいくつかの情報をコピーする必要があります。だから私はコードを書いたが、それはかなりバグで、バグ以外はXとYの位置が間違っている。見て：

$(".infoBox").die(); 
$(".infoBox").live('mouseover mouseout', function(e) { 
    if (e.type == 'mouseover') { 
     $("#infoBox").html(""); 
     $("#infoBox") 
      .css('top', (e.pageY - 10) + 'px') 
      .css('left', (e.pageX - 20) + 'px'); 

     setTimeout(showInfoBox, 500); 

     ID = $(this).attr('id');  

     if ($(this).hasClass("companyInfo")) { showCompanyInfo(ID); } 
     if ($(this).hasClass("userInfo"))  { showUserInfo(ID); } 

    } else { 
     setTimeout(hideInfoBox, 1000); 
    } 
}); 

function showInfoBox() { 
    $("#infoBox").fadeIn('slow'); 
} 

function hideInfoBox() { 
    if (mouse_in_infoBox == 0) { 
     $("#infoBox").hide(); 
     $("#infoBox").html(""); 
    } 
}; 

$("#infoBox").hover(
    function() { 
     mouse_in_infoBox = 1; 
    }, 
    function() { 
     mouse_in_infoBox = 0; 
     setTimeout(hideInfoBox, 1000); 
    } 
); 

をだから私は、例えば

<img class="infoBox" id="company_id_which_was_dynamically_added"> 

とshowCompanyInfoは、私が得た私のindex.phpで

"$("infoBox").html(...)". 

が持っているしている、とCSSは次のとおりです。

#infoBox { 
display: none; 
position: absolute; 
border: 1px solid #CDFF00; 
background-color: #1C1F1A; 
color: #CCCC33; 
padding: 10px; 
z-index: 5; 
max-width: 400px; 
min-width: 50px; 
min-height: 50px; 
} 

ああ、はい、別の質問はライブとdに関連していますすなわち方法。私のサイトにはたくさんのタブがあり、私がそれらを切り替えるときに、いくつかの要素に.click/.hoverのようなハンドラーを置いていました。そして私のタブはajaxを使うので、ここでは.liveメソッドを使用します。しかし、タブを何回か切り替えると、いくつかのハンドラが同じになります。たとえば、ライトボックスを表示すると、いくつかのライトボックスが表示されます。今、私は.live（）の前に.die（）を使用していますが、これは良い解決策ではないようです...

私はこれらのポップアップウィンドウを何度か作ろうとしたので、常にいくつかのバグがあります。上のコードでは、マウスをクリックすると空のウィンドウやその他の悪いものが表示されます。

ありがとうございます！

Answer 1

ここで間違っているように見えることがいくつかありますが、コードの詳細を表示して詳細を知ることなく何が起こっているのかを正確に伝えるのは難しいです。どのバージョンのjQueryを使用していますか？どのブラウザーに問題がありますか？問題はすべてのブラウザーまたは特定のブラウザーにのみ存在しますか？

the jQuery websiteによると、live（）はバージョン1.7で廃止され、代わりにon() event handlerを使用する必要があります。おそらくあなたの問題はライブハンドラの使用に関連しているでしょう。

あなたの間違ったpageX値を解決できる別のことは、e.pageXが実際には整数であることを確認することです（parseInt（e.pageX、10）を使用して整数であることを確認してください）。私は整数でなければならない変数には奇妙な問題がありましたが、何らかの理由で文字列になることになります。今私はすべての整数を（parseInt（）を使用して）整数として宣言し、javascriptが独自に決定することを許可しないようにします。

また、あなたのコードのこの部分は、任意の意味をなさない：

$("#infoBox").hover(
    function() { 
     mouse_in_infoBox = 1; 
    }, 
    function() { 
     mouse_in_infoBox = 0; 
     setTimeout(hideInfoBox, 1000); 
    } 
); 

mouse_in_infoBoxの値は常に0

私が見るもう一つの問題は、あなたがのためにあなたのセレクタとの矛盾を持っているということであるだろうinfoBox。 infoBoxはクラス$（ '。infoBox'）ですか、それともid $（ '＃infoBox'）ですか？上記のコードに基づいて多くの誤ったセレクタがあります。infoBoxへの参照はすべて$（ 'infoBox'）でなく$（ 'infoBox'）でなければなりません。また、あなたのCSSはid #infoBoxに適用されるので、意図的であるかどうかはわかりません。

これが役に立ちます。