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

Question

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

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

以下是示例页面:click here

好的，请点击菜单中的“照片”，然后打开左侧菜单中的一张图像，例如“黄昏”。黄昏图像将被放置在主框中。现在我想在单击图像时使用 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');

另外:由于您已经在使用 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(); });
    }
  }
}