event.pageX - Use JQuery Event in a function not bound through JQuery?

Question

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.

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");
}

Everything is working wonderfully in FF, Safari, and Chrome. In IE, it all works except that the detail div appears below the table. event.pageX/Y aren't working. I know JQuery will fix those for IE if I bind the function through JQuery like this:

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

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.)

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.

Many thanks in advance.

Answer 1

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

I found the fix function by searching through the jQuery source code.

Alternatively, you could use this to get the mouse coordinates without 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;
}

Via PPK: http://www.quirksmode.org/js/events_properties.html

Answer 2

You might find that the issue you're facing is not a positioning issue at all. Based on the syntax you posted, you may be experiencing an IE bug relating to the use of the CSS ID selector.

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

If IE doesn't recognize the "#main" element, the append() function will not work correctly. IE (pre-v7) has spotty support for the ID (#) selector. Instead try:

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

Try this and let me know how it works for you.

Answer 3

This blog post seems to be relevant: http://www.barneyb.com/barneyblog/2009/04/10/jquery-bind-data/

Seems it's just jQuery("#selector").bind("click", {name: "barney"}, clickHandler);, then e.data.name to access it in the event.