當使用AJAX放置時，Thickbox無法正常工作

Question

首先讓我說我自己學習了腳本，所以我的方法可能有點奇怪。

我想使用AJAX將圖片調用爲div，但使用thickbox標籤，因此當單擊圖像縮略圖時，使用Thickbox（jQuery）顯示大圖像。

下面是示例頁面：click here

OK，請在「照片」的menue，然後在左側menue打開一個圖像，例如，「黃昏」。黃昏圖像將被放置在主框中。 現在，我想在點擊它時使用Thickbox打開圖像。但它不起作用，它只是在同一個窗口中打開圖像。

然而ThickBox的正常工作，如果我只是一個圖像添加到這樣的test2.php：

<a href="images/test1.jpg" class="thickbox" rel="gallery"><img id="images" src="images/test1.jpg" alt="Single Image" /></a> 

這裏是我的後臺是如何構成的。 將所有需要的js文件（jQuery，thickbox等）集成到test2.php中

當單擊照片菜單中的某個鏈接時，AJAX調用將發送到帶有照片ID的getwork.php 。

function createRequestObject() 
{ 
var ro; 
var browser = navigator.appName; 
if(browser == "Microsoft Internet Explorer") 
    { 
    ro = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
    else 
    { 
    ro = new XMLHttpRequest(); 
} 
return ro; 

} 

var http = createRequestObject(); 

var katcheck; 

function sndReq(req) 
{ 

var req2 = req; 

katcheck = req.slice(0, 1); 

    if (katcheck == "k") 
    { 
    var katid = req2.slice(3,4); 

    http.open('get', 'getkat.php?kat='+katid); 
    http.send(null); 
    http.onreadystatechange = handleResponse; 
    } 
    else 
    { 

    if(startcheck==true){ var param = req; 
          http.open('get', 'getwork.php?id='+param); 
          http.send(null); 
          http.onreadystatechange = handleResponse;} 
    else{ 
    $('#videoleft') 
     .animate( {"left": "-800px"}, 
       600, 'easeInQuad', 
       function(){ 

          var param = req; 
          http.open('get', 'getwork.php?id='+param); 
          http.send(null); 
          http.onreadystatechange = handleResponse; 
          } // this is the callback function 
      ) 
     .animate(
       {"top": "0px", "left": "800px"}, 
       { queue:true, duration:1}, 
       function(){$(this).hide();} 
      ); 
    } 
    } 
} 



function handleResponse() 
{ 
    if(http.readyState == 4) 
        { 
        var response = http.responseText; 

     if (katcheck == "k") 
     { 

       document.getElementById("videomenue").innerHTML = response; 
       $("#videomenue").animate({"top": "0px", "left": "0px"},{ queue:true, duration:1}).show(500); 
       $('#videoleft').css('float', 'right'); 
     } 
     else 
     { 
     document.getElementById("post").innerHTML = response; 

     if(startcheck==true){ startcheck=false;} 
     else 
     { 
     $('#videoleft').show().animate({"top": "0px", "left":"0px"},{ queue:true, duration:800, easing: 'easeOutBack'}); 
     } 
     } 
    } 


    } 

OK，現在在getwork.php會發生什麼：

{ 
$imgecho = ('<div class="img"><a href="'.$src.'?height=300&width=300modal=true" class="thickbox" rel="gallery"><img src="'.$image.'" width="'.$width1.'" height="'.$heightpic.'" alt="'.$row['title'].'" style="border: solid 1px grey;" /></a></div>'); 
} 
echo ('<div class="titleBG"></div><p class="title">'.$row['title'].'</p>'.$imgecho.''); break; 

我當然剝離下來，只在重要的部分。該PHP文件正常工作，但不知何故厚盒所需的應用標籤沒有工作。 我甚至在Thickbox網站上增加了?height=300&width=300modal=true這樣的建議，但它不起作用。 我無法向自己解釋，它已經在困擾我很長一段時間了。

我希望有人能幫助我。非常感謝你！

Answer 1

您需要設置的內容，例如後手動調用tb_init方法，設置innerHTML#videomenue的調用之後這樣的：

tb_init('#videomenue a.thickbox'); 

而且#post調用後：

tb_init('#post a.thickbox'); 

另請參見：由於您已經在使用jQuery，因此您需要花費大量不必要的時間。例如，這裏是使用jQuery快速重寫您發佈的所有代碼。如果您已決定使用jQuery，請嘗試儘可能多地使用它來清理代碼（如一般慣例）：

function sndReq(req){ 
    var req2 = req, 
    katcheck = req.slice(0, 1); 

    var handleResponse = function(data){ 
    if(data){ 
     if(katcheck == "k"){ 
     $("#videomenue") 
      .html(data) 
      .animate({"top": "0px", "left": "0px"},{ queue:true, duration:1}).show(500); 
     tb_init('#videomenue a.thickbox'); 
     $('#videoleft').css('float', 'right'); 
     } else { 
     $("#post").html(data); 
     tb_init('#post a.thickbox'); 
     if(startcheck == true){ 
      startcheck = false; 
     } else { 
      $('#videoleft').show().animate({"top": "0px", "left":"0px"},{ queue:true, duration:800, easing: 'easeOutBack'}); 
     } 
     } 
    } 
    } 

    if(katcheck == "k"){ 
    var katid = req2.slice(3,4); 
    $.get('getwork.php', { kat: katid }, handleResponse); 
    } else { 
    var param = req; 
    if(startcheck == true){ 
     $.get('getwork.php', { id: param }, handleResponse); 
    } else { 
     $('#videoleft') 
     .animate({"left": "-800px"}, 600, 'easeInQuad', 
      function(){ $.get('getwork.php', { id: param }, handleResponse); }) 
     .animate({"top": "0px", "left": "800px"}, {queue:true, duration:1}, 
      function(){ $(this).hide(); }); 
    } 
    } 
} 

Answer 2

由於大多數Lightbox克隆，Thickbox在主文檔的load上初始化。它會查找具有所需類的所有<a>元素，並向它們添加必要的事件。稍後介紹到元素中的元素將會自動變爲厚盒子鏈接，而不是而不是。

每次引入新元素時，您都必須運行Thickbox初始化命令，或瞭解如何初始化特定元素。