Geek Answers Handbook

Event.pageX - Use jQuery event in non-jQuery function?

I have a table, and when the user clicks on each cell, some details should appear in a small pop-up div that appears where the user clicked. I use jQuery, but do not 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 works fine in FF, Safari, and Chrome. In IE, everything works, except that the div part is displayed below the table. event.pageX / Y do not work. I know that jQuery will fix those used for IE if I bind the function via jQuery as follows:

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

But I can’t do it. (I don’t think I can - if so, explain how I can get six variables in this function without using non-xhtml tags in the cell.)

JQuery "" , JQuery? $JQuery.fixEvent(); -? .

.

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

fix, jQuery.

, 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: http://www.quirksmode.org/js/events_properties.html

+12

, , : http://www.barneyb.com/barneyblog/2009/04/10/jquery-bind-data/

, jQuery("#selector").bind("click", {name: "barney"}, clickHandler);, e.data.name .

0

You may find that the problem you are facing is not a positioning problem at all. Based on the syntax you posted, an IE error may occur due to the use of the CSS ID selector.

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

If IE does not recognize the "#main" element, the append () function will not work correctly. IE (pre-v7) has spotty ID selector support (#). Try instead:

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

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

-1
source

More articles:


All Articles