Javascript AJAX、JS和Fancybox，如何使其正常工作？_Javascript_Html_Ajax_Fancybox

Javascript AJAX、JS和Fancybox，如何使其正常工作？

javascript html ajax

Javascript AJAX、JS和Fancybox，如何使其正常工作？,javascript,html,ajax,fancybox,Javascript,Html,Ajax,Fancybox,我正在使用ajax制作一个小网站，主要是出于好奇我不想使用Fancybox在ajax内容中显示图像我现在做的事情很简单，我有一个主html页面，超链接只是改变一个分区的内容。。。例如： <!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

我正在使用ajax制作一个小网站，主要是出于好奇

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

我现在做的事情很简单，我有一个主html页面，超链接只是改变一个分区的内容。。。例如：

<!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>

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

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

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

<!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>

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

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

但我就是不知道在哪里。。。如果我把它放在html内容中，它将不会被计算

因此，当我单击缩略图时，它只会将我发送到完整大小的图像（带有未捕获的TypeError：无法调用未定义的方法'appendChild'，并且资源被解释为文档，但使用MIME类型image/png传输）

我所有的研究结果都指向了一个相反的问题（在fancybox中调用ajax内容）

现在我的问题是：

这是使用ajax的正确方法吗
如何才能使ajax内容包含Fancybox链接

多谢各位， Pierre Luc

您可以将事件侦听器挂接到div的

change

事件

刚刚意识到div没有变化事件。我会完全删除答案，但是OP中的注释可能会帮助其他人。

您可以将事件侦听器挂接到div的

更改

事件

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

通过直接在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，但结果是一样的，例如：

<!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>

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

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

通过在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，但结果是一样的，例如：

<!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>

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

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

一个问题——如果您已经在使用jQuery，为什么不使用它的

.ajax（）

方法而不是自己的方法呢？我使用jQuery只是因为它实际上是Fancybox的一个依赖项。我不是web开发人员，所以我只是遵循w3c教程，然后添加了facybox内容。但你是对的，我刚看过JQuery.ajax，它甚至可以在内容中评估脚本，我会试试。一个问题——如果你已经在使用JQuery，为什么不使用它的

.ajax（）

方法而不是自己的方法呢？我使用JQuery只是因为它实际上是Fancybox的一个依赖项。我不是web开发人员，所以我只是遵循w3c教程，然后添加了facybox内容。但你说得对，我刚刚看过JQuery.ajax，它甚至可以在内容中评估脚本，我会试试。谢谢你的快速回复。这没用，但我不明白为什么。实际上，如果我只是将console.log作为绑定回调，那么它也不起作用。但是我在onreadystatechange回调中调用了fancybox，成功地让它工作了……很高兴你让它工作了。你应该把你所做的作为一个答案，并选择正确的答案，以防其他人遇到类似的情况。当然，我需要等待8个小时，谢谢你的快速回复。这没用，但我不明白为什么。实际上，如果我只是将console.log作为绑定回调，那么它也不起作用。但是我在onreadystatechange回调中调用了fancybox，成功地让它工作了……很高兴你让它工作了。你应该把你所做的作为一个答案，并选择正确的答案，以防其他人遇到类似的情况。当然，我需要等8个小时^^