Fancybox는 PHP 호출 후 Ajax 사이트에서 작동하지 않으며 DOM은 HTML로 채워 넣습니다.

Question

#pageContent을 통해 php 호출을로드하고 HTML로 DOM을 채우는 간단한 ajax 웹 사이트를 구축합니다. #pageContent 내의 링크에 Fancybox를 사용하고 있습니다. fancybox가 더 이상 작동하지 않고 링크가 전혀 작동하지 않더라도 다른 페이지로 이동하면 fancybox가 정상적으로 작동하는 홈 페이지에 문제가 있습니다. 나는 시도한 스크립트를 setTimeout, pageLoad() 및 다른 많은 아이디어로 옮겼습니다.

Ajax 호출 : 여기

코드입니다 : 누군가가 나에게 이것에 대해 미쳐가는 IM 도와주세요

var default_content=""; 

$(document).ready(function(){ 

checkURL(); 
$('ul li a').click(function (e){ 

     checkURL(this.hash); 

}); 

//filling in the default content 
default_content = $('#pageContent').html(); 


setInterval("checkURL()",250); 


}); 
var lasturl=""; 

function checkURL(hash) 
{ 
if(!hash) hash=window.location.hash; 

if(hash != lasturl) 
{ 
    lasturl=hash; 

    // FIX - if we've used the history buttons to return to the homepage, 
    // fill the pageContent with the default_content 

    if(hash=="") 
    $('#pageContent').html(default_content); 

    else 
    loadPage(hash); 
} 
} 


function loadPage(url) 
{ 
url=url.replace('#page',''); 

$('#loading').css('visibility','visible'); 

$.ajax({ 
    type: "POST", 
    url: "load_page.php", 
    data: 'page='+url, 
    dataType: "html", 
    success: function(msg){ 


     if(parseInt(msg)!=0) 
     { 
      $('#pageContent').html(msg); 
      $('#loading').css('visibility','hidden'); 
     } 
    } 

}); 

} 

Fancybox 스크립트 화재 : 문제에

$(document).ready(function(){ 
    $(".extLink").fancybox({ 
     'width' : '75%', 
     'height' : '100%', 
     'autoScale' : false, 
     'transitionIn' : 'elastic', 
     'transitionOut' : 'fade', 
     'type' : 'iframe' 
    }); 

}); 

링크가 같다 다음과 같습니다 :

http://dev.abdemo.net/perfectparties

Answer 1

스크립트의 fancybox API 옵션 때문에 fancybox v1.3.x를 사용하고 있다고 가정합니다. 이 버전은 동적으로 추가 된 요소를 지원하지 않습니다. DOM을 채울 때의 경우입니다.

비슷한 질문에 here, jQuery .on() 메서드를 사용하여 동적으로 추가 된 요소에 fancybox를 바인딩했습니다.

같은 컨테이너에 맞게 코드를 조정할 :

$("#pageContent").on("focusin", function(){... 

을 ... 그리고 setTimeout 물건을 잊어. OK

Answer 2

그래서 나는 그것을 알아 냈 : AJAX 호출을 만드는 스크립트 파일에

, 성공에서 당신과 같이 머리에 각 파일을 추가합니다 THEN

function loadPage(url) 
{ 
    url=url.replace('#page',''); 

    $('#loading').css('visibility','visible'); 

    $.ajax({ 
     type: "POST", 
     url: "load_page.php", 
     data: 'page='+url, 
     dataType: "html", 
     success: function(msg){ 



      if(parseInt(msg)!=0) 
      { 
       $('#pageContent').html(msg); 
       $('#loading').css('visibility','hidden'); 
      } 
      $('head').append('<link type="text/javascript" src="jquery-1.3.2.min.js" />'); 
      $('head').append('<link rel="stylesheet" href="deckfire.css" type="text/css" />'); 
      $('head').append('<link type="text/javascript" src="slidedeck.jquery.js" />'); 
      $('head').append('<link type="text/javascript" src="deckfire.js" />'); 

     } 

    }); 

} 

이 유일한입니다

$(document).ready(function(){ 
    if (jQuery.browser.safari && document.readyState != "complete"){ 
     setTimeout(arguments.callee, 100); 
     return; 
    } 
    window.Deck = $('.slidedeck').slidedeck(); 
}); 

:

는 DOM에로드 된 각 HTML 파일의 맨 아래에이 스크립트를 추가 WAY는 IT를 작동하도록

이 두 스크립트에서 클래스와 ID를 변경해야하지만 올바른 클래스와 ID를 얻은 후에는 매력처럼 작동합니다.

현재로서는 사이트가 최신 상태는 아니지만 곧 볼 수 있습니다 @ www.ppratl.com