Thickbox를 사용한 jQuery ajax 응답
문제
따라서 유효한 HTML을 반환하는 서비스 (jQuery 사용)에 대한 Ajax 호출이 있습니다.
<table class='datagrid' style='width: 600px; text-align:left'>
<tr><th>User</th><th>Full Name</th><th>Company</th><th>New Prints</th><th>Reprints</th></tr><tr>
<td>
<a class='thickbox' href='UserSessionReportPopup.aspx?user=1&start=9/2/2009&end=9/30/2009&TB_iframe=true&height=450&width=700'>carbon</a>
</td><td>Carbon County</td>
<td></td>
<td>5</td>
<td>4</td>
</tr>
</table>
이 반환 HTML은 올바르게 할당되고 페이지에 표시되지만 "A"클릭하면 iframe 컨텐츠가있는 "Thickbox"대신 새 페이지가 열립니다.
이 코드를 페이지에 복사 한 다음 브라우저에서 실행하면 혼란스러운 부분은 다음과 같습니다.
Ajax 응답이 Thickbox 항목을 올바르게 표시하지 않는 이유는 무엇입니까?
내 생각에 응답 텍스트의 클래스 = 'Thickbox'는 해당 항목을 구문 분석하는 방법을 아는 JavaScript를 찾지 못한다고 생각합니다.
해결책
나는 문제가 있다고 생각한다 <a class='thickbox'
이벤트가 바운드가 없습니다.
나는 링크가 포함 된 기존 DOM 요소를 복사했을 때 정확히 같은 문제를 겪었고 모든 바운드 이벤트는 새로 생성 된 요소에서 작동하지 않았습니다. 내가해야 할 일은 이벤트를 그 요소들에게도 묶는 것입니다.
따라서이 새로운 요소에 대한 두꺼운 박스 호출 만하십시오. $ (document) .ready에서 사용하는 것과 동일한 코드를 사용하지 마십시오. 그런 일을했을 때 이벤트가 새로운 요소에서 작동하기 시작했지만 오래된 요소에서 두 번 발사되었습니다.
주석의 응답으로 편집 : 두꺼운 박스가 어떻게 작동하는지 모르겠습니다. 나는 항상 슬림 박스를 선호했습니다. 나는 당신을 도울 수있는 몇 가지 예를 찾았습니다. 이것을 읽으십시오 (두께에 관한) :http://15daysofjquery.com/jquery-leightbox/19/
기본적으로 페이지가 꿀벌을로드하면이 기능이 발사됩니다.
function TB_init(){
$("a.thickbox").click(function(){
var t = this.title || this.innerHTML || this.href;
TB_show(t,this.href);
this.blur();
return false;
});
이제 클래스 Thickbox가있는 모든 태그는 Thickbox 창에 대한 링크 포인트를 열게됩니다. 새 요소가 페이지에 추가되면이 이벤트가 그들에게 묶여 있지 않으므로 Ajax Magic을 수행하고 해당 새 콘텐츠를 어딘가에서 가져 오면 $ ( "A.thickbox")를 바인딩해야합니다. 클릭하십시오. (function () {새 링크에.
$(newlinkselector).click(function{ etc.. etc..
스크립트에서, 장소 직후에 당신은 Ajax 호출이 당신에게 돌려주는 물건을 렌더링합니다.
다른 팁
Ajax 응답 내에 다음 스크립트를 넣을 수도 있습니다.
<script type="text/javascript">
self.parent.tb_init('a.thickbox, area.thickbox, input.thickbox');
</script>
Ajax 응답이 나타날 때마다 두꺼운 상자를 초기화합니다.
나는 같은 문제가 있었다. 빠른 답변 - innerhtml을 채우고 다음 줄을 추가하십시오 : tb_init ( 'a.thickbox'); // 다시 초기화
이것은 앵커 태그의 이벤트 핸들러를 다시 시작합니다. 나에게 매력처럼 일했다 ...
tb_init ()를 다음으로 바꾸십시오.
function tb_init(domChunk){
$(domChunk).live("click", function(){
var t = this.title || this.name || null;
var a = this.href || this.alt;
var g = this.rel || false;
tb_show(t,a,g);
this.blur();
return false;
});
}
이것은 동적으로 생성 된 컨텐츠를 고려하는 jQuery 메소드 라이브로 클릭 이벤트를 바인딩합니다.