Thickbox를 사용한 jQuery ajax 응답

StackOverflow https://stackoverflow.com/questions/1430027

  •  07-07-2019
  •  | 
  •  

문제

따라서 유효한 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 메소드 라이브로 클릭 이벤트를 바인딩합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top