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에서는 세부 사항 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" 

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

통해 PPK 이것을 사용할 수 있습니다 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 이벤트에 액세스 할 수있어 보인다.