JQuery UI 위젯 내에서 클릭 이벤트를 캡처 할 수 없습니다.

Question

링크에 툴팁을 표시하는 데 cluetips 플러그인을 사용하고 있습니다. 도구 팁에는 텍스트와 링크가 있습니다. 링크 (클래스 'show-panel')를 클릭하면 라이트 박스 유형 div가 맨 위에 열립니다. 그러나 click 이벤트는 JQuery UI 위젯을 사용하는 툴팁 내의 링크에 바인딩되지 않는 것처럼 보입니다. 라이트 박스 스크립트는 툴팁 상자 외부의 링크에서 작동하기 때문에 작동한다는 것을 알고 있습니다. JQuery UI가 그 일을 한 후에 HTML을 보겠습니다. 여기

<div id="cluetip" class="cluetip ui-widget ui-widget-content ui-cluetip clue-top-sequoia cluetip-sequoia" style="position: absolute; width: 275px; left: 126.5px; z-index: 97; top: 124px; box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.5); display: block;"> 
<div class="cluetip-outer" style="position: relative; z-index: 97; overflow: visible; height: auto;"> 
<h3 class="cluetip-title ui-widget-header ui-cluetip-header">Sed ut perspiciatis unde omnis</h3> 
<div class="cluetip-inner ui-widget-content ui-cluetip-content"> 
<div class="cluetip-close"> 
iste natus error 
<a class="show-panel" rel="detailpage" href="http://www.my.link/">sit voluptatem</a> 
accusantium doloremque laudantium, sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
</div> 
</div> 
<div class="cluetip-extra"></div> 
<div class="cluetip-arrows ui-state-default" style="z-index: 98; display: block;"></div> 
</div> 

은 JQuery와입니다 : 내가 추측하고있어

$("a.show-panel").click(function(e){ 
//alert("works"); 
$("#lightbox, #lightbox-panel").fadeIn(300); 
e.preventDefault(); 
}) 
$("a#close-panel").click(function(e){ 
$("#lightbox, #lightbox-panel").fadeOut(300); 
e.preventDefault(); 
}) 

은 범위 문제의 일종이다하지만 난 링크에 액세스하는 방법을 모르겠어요.

모든 의견을 환영합니다.

Answer 1

http://api.jquery.com/bind/ 

$("a#close-panel").bind("click", function(){ 

}); 

편집 : 죄송합니다. 이전에 설명을 남기지 않았습니다. DOM로드 페이지에 나타나지 않는 항목에는 바인딩을 적용 할 수 없습니다. 툴팁 상자와 같이 페이지에 요소를로드하거나 작성하는 경우 jQuery 바인드 메소드를 사용해야합니다.

Answer 2

'Delegate'메서드가 JQuery 1.7에서 'on'메서드로 대체되었지만 @FoRever_Zambia 덕분에 그의 의견에 답했습니다.

코드는 다음과 같습니다.

$(".cluetip-inner").on("click", ".show-panel", function(e) { 
$("#lightbox, #lightbox-panel").fadeIn(300); 
e.preventDefault(); 
}); 

Answer 3

위의 섀디 레인의 답변이 좋습니다. 때로는 이러한 시나리오에서 jQuery로 대상을 선택하는 셀렉터를 연구하는 것도 마찬가지로 중요하다고 생각합니다. clueTip과 같은 것들을 사용할 때 DOM에 추가되는 내용이 많기 때문에 실제로 존재하는 것보다는 플러그인에서 생성되는 선택기 일 수 있다는 것을 명심해야합니다. 오, 그리고 단서들 바위를 조사 해봐!