event.pageX - JQueryにバインドされていない関数でJQueryイベントを使用しますか？

Question

私はテーブルを持っています。ユーザーが各セルをクリックすると、ユーザーがクリックした場所に表示される小さなポップアップdivにいくつかの詳細が表示されます。私はJQueryを使用していますが、関数をonclickイベントにバインドすることはできません。

function detailPopup(cell, event, groupName, groupID, ...) 
{ 
    var newDiv = document.createElement("div"); 
    newDiv.id = "detailPop" + groupID; 
    newDiv.className = "priceDetailPopup"; 
    newDiv.innerHTML = "<p>" + groupName + "</p>"; // more will go here 
    $(newDiv).click(function() 
     { 
      $(this).fadeOut("fast").remove(); 
     } 
    ); 
    $("#main").append(newDiv); 
    $(newDiv).css({"left" : event.pageX, "top" : event.pageY}).fadeIn("fast"); 
} 

FF、Safari、Chromeですべてがうまく機能しています。 IEでは、detail divが表の下に表示される以外はすべて動作します。 event.pageX/Yが機能していません。私はこのようにjQueryの通過機能をバインドする場合はjQueryのIE用のものを修正します知っている：

$(cell).click(function(e) { ... e.pageX ... }) 

しかし、私はそれを行うことはできません。 （私はできないと思います。あなたがすれば、セル内でxhtml以外のタグを使わなくても、その変数に6つの変数を与える方法を説明してください）。

JQueryを持つ方法はありますか？ "JQueryを介して関数をバインドせずにイベントオブジェクト？ $ JQuery.fixEvent（event）;か何か？私は彼らのサイトでこれを行うことについての参照を見つけることができません。

事前に感謝します。

Answer 1

e = jQuery.event.fix(e); //you should rename your event parameter to "e" 

私はfixの機能をjQueryのソースコードから検索して見つけました。

また、あなたは

var posx = 0; 
var posy = 0; 
if (!e) var e = window.event; 
if (e.pageX || e.pageY) { 
    posx = e.pageX; 
    posy = e.pageY; 
} 
else if (e.clientX || e.clientY) { 
    posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
    posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
} 

経由PPK ...マウスはjQueryのなしを座標取得するためにこれを使用することができます：http://www.quirksmode.org/js/events_properties.html

Answer 2

あなたが直面している問題がないことを見つけるかもしれませんポジショニングの問題。投稿した構文に基づいて、CSS IDセレクタの使用に関するIEのバグが発生している可能性があります。

$("#main").append(newDiv); 

IEが「#main」要素を認識しない場合、append（）関数は正しく機能しません。 IE（pre-v7以前）は、ID（＃）セレクタの不自由なサポートを持っています。代わりに試してみてください：

$('div[id="main"]').append(newDiv); 

これを試してみて、どのように動作するか教えてください。

Answer 3

このブログ記事は関連があると思わ：http://www.barneyb.com/barneyblog/2009/04/10/jquery-bind-data/

それはイベントでそれにアクセスするだけでjQuery("#selector").bind("click", {name: "barney"}, clickHandler);、その後、e.data.nameだようです。