我有一个表,当用户点击每个单元格时,一些细节应该出现在用户单击的小弹出框中。我正在使用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中,除了细节div出现在表格下方之外,它都有效。 event.pageX / Y不起作用。我知道如果我通过jQuery绑定函数,jQuery将为IE修复这些:
$(cell).click(function(e) { ... e.pageX ... })
但我不能这样做。 (我认为我不能 - 如果你这样做,请解释如何在不使用单元格中的非xhtml标签的情况下将六个变量放入该函数中。)
有没有办法让jQuery“修复”事件对象而不通过jQuery绑定函数? $ JQuery.fixEvent(事件);或者其他的东西?我在他们的网站上找不到任何参考。
e = jQuery.event.fix(e); //you should rename your event parameter to "e"
我通过搜索jQuery源代码找到了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;
}
这篇博文似乎是相关的:http://www.barneyb.com/barneyblog/2009/04/10/jquery-bind-data/
似乎它只是jQuery("#selector").bind("click", {name: "barney"}, clickHandler);
,然后e.data.name
在事件中访问它。
您可能会发现您面临的问题根本不是定位问题。根据您发布的语法,您可能遇到与使用CSS ID选择器相关的IE错误。
$("#main").append(newDiv);
如果IE无法识别“#main”元素,则append()函数将无法正常工作。 IE(v7之前版本)对ID(#)选择器提供了不稳定的支持。而是尝试:
$('div[id="main"]').append(newDiv);
试试这个,让我知道它是如何为你工作的。