AJAX로 데이터를 가져온 후 jQuery ColorBox를 다시로드하십시오.

Question

내 페이지에서 비동기 페이지 로딩을 위해 colorbox jQuery 플러그인과 AJAX를 사용하고 있습니다.

AJAX로 .php 파일에서 내용을 가져온 후 해당 .php 파일의 내용이 colorbox에서 작동하지 않습니다.

$('a.boxed').colorbox({rel: 'Galleria'}); 
$('a.iframe').colorbox({iframe: true, width: "80%", height: "80%"}); 

이

내가 내의 .js에 colorbox의 파일을 가지고있는 두 행이 (가 AJAX에서로드되지 않은 다른 요소에 작동하기 때문에 내가 제대로 플러그인을 수입)입니다. 나는이 코드를 사용하여 나에게 colorbox은 iframe을 열고, 한 번 클릭하여 이미지를 만들고 싶었 :

기능 showpage를 : 내 웹 페이지에서 버튼을 클릭하면

<a href="MYURL" class="iframe"><img src="IMGURL"/></a> 

을 내가 AJAX와 함께 다시로드하려면 다음 코드를 사용 (page) { var xmlhttp = new XMLHttpRequest(); // 지난번 variabile XMLHttpRequest를 당 위원장 caricamento asincrono 사기꾼 AJAX

xmlhttp.onreadystatechange = function() { 
    document.getElementById("post-title").innerHTML = page; 
    document.getElementById("post-content").innerHTML = xmlhttp.responseText; 
} 

xmlhttp.open("GET", page + ".php", true); 
xmlhttp.send(); 

}

나는 라이브() 메서드를 사용한다고 주위 읽을 수 있지만 내가 jQuery를 함께 사용되지 않는 것을 발견하고 지금에있다() 메서드 .. 무슨 혼란! 누군가 나를 도울 수 있습니까?

Answer 1

이 시도 : 새 요소를로드하기 전에 이벤트 핸들러를 추가하는 경우

function showPage(page) { 
    var xmlhttp = new XMLHttpRequest(); // Creo variabile XMLHttpRequest per il caricamento asincrono con AJAX 

    xmlhttp.onreadystatechange = function() { 
     document.getElementById("post-title").innerHTML = page; 
     document.getElementById("post-content").innerHTML = xmlhttp.responseText; 
     $('a.iframe').colorbox({iframe: true, width: "80%", height: "80%"}); // <-- add this line 
    } 

    xmlhttp.open("GET", page + ".php", true); 
    xmlhttp.send(); 
} 

는 새로운 사람이 "수신"하지 않을 경우