使用 AJAX 放置时，Thickbox 不起作用

Question

首先我要说的是，我是自学脚本编写的，所以我的方法可能有点奇怪。

我想使用 AJAX 将图像调用到 div 中，但使用 Thickbox 标签，这样当单击图像拇指时，将使用 Thickbox (jQuery) 显示大图像。

以下是示例页面： 单击此处

好的，请单击菜单中的“照片” ”，然后打开左侧菜单中的图像之一，例如“黄昏”。黄昏图像将被放置在主框中。 现在我想在单击图像时使用 Thickbox 打开图像。但它不起作用，它只是在同一窗口中打开图像。

然而，如果我只是像这样向 test2.php 添加图像，Thickbox 就能正常工作：

<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'});
      }
      }
    }


  }

好的，现在 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 所需的应用标签都不起作用。 我什至按照 Thickbox 网站上的建议添加了 ?height=300&width=300modal=true 但它不起作用。 我无法向自己解释它，它已经困扰我很长一段时间了。

我希望有人能帮助我。非常感谢！

Answer 1

设置内容后需要手动调用tb_init方法，例如设置#videomenue的innerHTML后调用

tb_init('#videomenue a.thickbox');

： #post 调用：

tb_init('#post a.thickbox');

Also: 因为您已经在使用 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 在主文档加载时进行初始化。它查找所有具有所需类的元素，并向它们添加必要的事件。稍后引入文档的元素不会自动变成厚盒链接。

每次引入新元素时，您都必须运行 Thickbox 初始化命令，或者了解如何初始化特定元素。