Question

我正在使用ajax创建一个小网站，主要是出于好奇心。

我不想使用Fancybox在ajax内容中显示图像。

我目前正在做的事情非常简单，我有一个主要的html页面，超链接只是更改单个div的内容...例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <script type="text/javascript" src="js/ajax.js"></script>

    <link rel="stylesheet" href="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
  </head>

  <body>

    <div>
      <a href="javascript:void(0)" onclick="xml_doc('ajax', 'ajax.html')"> test </a>
    </div>

    <div id="ajax">
    </div>

  </body>

</html>

和基本的js代码：

function xml_obj()
{
    var xmlhttp;

    // IE7+, Firefox, Chrome, Opera, Safari
    if (window.XMLHttpRequest)
    return new XMLHttpRequest();

    // IE6, IE5
    else
    return new ActiveXObject("Microsoft.XMLHTTP");
}

function xml_cfunc(div, xmlhttp)
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    div.innerHTML=xmlhttp.responseText;
}

function xml_doc(id, url)
{
    var xmlhttp = xml_obj();
    var div = document.getElementById(id);

    xmlhttp.onreadystatechange = function()
    {
    xml_cfunc(div, xmlhttp);
    };

    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

ajax.html的内容将是单个href，例如：

<a id="single_image" href="image.png"><img src="thumb.png" alt=""/></a>

现在我必须把fancybox调用到某处：

$('a#single_image').fancybox();

但我无法找到...如果我把它放在html内容中就不会被评估。

因此，当我点击缩略图时，它只会将我发送到完整大小的图像（使用Uncaught TypeError：无法调用undefined的方法'appendChild'，并将Resource解释为文档但使用MIME类型image / png传输。）

我所有的研究都是针对相反的问题（在fancybox中调用ajax内容）。

现在我的问题是：

这是使用ajax的正确方法吗？
我怎么能这样做ajax内容可以包含Fancybox链接？

非常感谢，皮尔吕克

Answer 1

通过直接在ajax回调中启动fancybox来实现它：

function xml_cfunc(div, xmlhttp)
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    div.innerHTML=xmlhttp.responseText;
    $("a#single_image").fancybox();
    }
}

缺点是它将在每个ajax调用中继续进行，但这当然可以改变。重要的是，一旦DOM准备好，就必须评估javascript。

请注意，我知道使用JQuery.ajax，但结果是相同的，例如：

$.get(url,
  function(data) {
      $('#content_id').html(data);
      $("a#single_image").fancybox();
  });

Answer 2

~~您可以将事件监听器挂钩到div的change事件。~~

刚才意识到div没有变化事件。我完全删除了答案，但OP的评论可能会帮助其他人。

AJAX，JS和Fancybox，如何让它正常工作？

2 个答案: