Question

这可能是非常愚蠢的问题，我是javascript的新手，我使用http://photoswipe.com/ js库创建一个库，我从官方网站下载js库，我使用了给出的示例index.html页面正常工作正常。但是当我使用来自load函数的jquery append方法在$('.gallery-row').append('<div class="gallery-item"><a href="images/full/003.jpg"><img src="images/thumb/003.jpg" alt="Image 003" /></a></div>');上附加div <div class="gallery-row"></div>时出现问题。我的问题：图像显示，但是当我点击图像时，它不会打开滑动div。我浪费了一整天但没有得到任何东西。

我的代码：

<!DOCTYPE html>
<html>
<head>
  <title>PhotoSwipe</title>
  <meta name="author" content="Code Computerlove -  http://www.codecomputerlove.com/"  />
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0,  user-scalable=0;" name="viewport" />
  <link href="styles.css" type="text/css" rel="stylesheet" />
  <link href="photoswipe.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="lib/simple-inheritance.min.js"></script>
  <script type="text/javascript" src="code-photoswipe-1.0.11.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript">
    // Set up PhotoSwipe with all anchor tags in the Gallery container 
    document.addEventListener('DOMContentLoaded', function(){
        Code.photoSwipe('a', '#Gallery');
      }, false);
    function load(){
      //append div from this function 
      $('.gallery-row').append('<div class="gallery-item"><a href="images/full /003.jpg"><img src="images/thumb/003.jpg" alt="Image 003" /></a></div>');
    }
    </script>
  </head>
  <body onLoad="load()">
    <div id="Header">
      <a href="http://www.codecomputerlove.com"><img   src="images/codecomputerlovelogo.gif" width="230" height="48" alt="Code Computerlove"  /></a>
    </div>
    <div id="MainContent">
      <div class="page-content">
        <h1>PhotoSwipe</h1>
      </div>
      <div id="Gallery">
        <div class="gallery-row">
          <!--
            <div class="gallery-item"><a href="images/full/001.jpg"><img  src="images/thumb/001.jpg" alt="Image 001" /></a></div>
            <div class="gallery-item"><a href="images/full/002.jpg"><img  src="images/thumb/002.jpg" alt="Image 002" /></a></div>
            <div class="gallery-item"><a href="images/full/003.jpg"><img  src="images/thumb/003.jpg" alt="Image 003" /></a></div>
          -->
        </div>
      </div>
    </div>  
  </body>
</html>

Answer 1

在致电append之前，请尝试执行DOMContentLoaded处理程序中的Code.photoSwipe。此外，jQuery提供了一种更短的写入方式：

<script>
$(function() {
    $('.gallery-row').append('<div class="gallery-item"><a href="images/full /003.jpg"><img src="images/thumb/003.jpg" alt="Image 003" /></a></div>');
    Code.photoSwipe('a', '#Gallery');
});
</script>

执行此操作时，请从onload="load()"标记中删除<body>。

Answer 2

我想，你需要这样做：

document.addEventListener('DOMContentLoaded', function(){

        Code.photoSwipe('a', '#Gallery');

    }, false);

追加

之后

在某些Test之后， DOMContentLoaded 在onload之前被

Answer 3

也许它是你标签的href中的额外空间？尝试更改＆＃34; images / full /003.jpg" to＆＃34; images / full / 003.jpg＆＃34;

在div上使用jquery append方法追加div

3 个答案: