title: event.pageX - Use jQuery Event in a function not bound through jQuery?
body: <p>I have a table, and when the user clicks on each cell, some details should appear in a small popup div that appears where the user clicked. I'm using jQuery, but not to bind the function to the onClick event.</p>
  
  <pre><code>function detailPopup(cell, event, groupName, groupID, ...)
  {
     var newDiv = document.createElement("div");
     newDiv.id = "detailPop" + groupID;
     newDiv.className = "priceDetailPopup";
     newDiv.innerHTML = "&lt;p&gt;" + groupName + "&lt;/p&gt;"; // more will go here
     $(newDiv).click(function()
         {
             $(this).fadeOut("fast").remove();
         }
     );
     $("#main").append(newDiv);
     $(newDiv).css({"left" : event.pageX, "top" : event.pageY}).fadeIn("fast");
  }
  </code></pre>
  
  <p>Everything is working wonderfully in FF, Safari, and Chrome. In IE, it all works except that the detail div appears below the table. <strong>event.pageX/Y aren't working.</strong> I know jQuery will fix those for IE if I bind the function through jQuery like this:</p>
  
  <pre><code>$(cell).click(function(e) { ... e.pageX ... })
  </code></pre>
  
  <p>But I can't do that. (I don't think I can - if you do, please explain how I can get six variables into that function without having to use non-xhtml tags in the cell.)</p>
  
  <p>Is there a way to have jQuery "fix" the event object without binding the function through jQuery? $JQuery.fixEvent(event); or something? I can't find any reference to doing so on their site.</p>