Javascript 在div上使用jqueryappend方法追加div_Javascript_Jquery_Html_Css_Image

Javascript 在div上使用jqueryappend方法追加div

javascript jquery html css image

Javascript 在div上使用jqueryappend方法追加div,javascript,jquery,html,css,image,Javascript,Jquery,Html,Css,Image,这可能是一个非常愚蠢的问题，我是javascript新手，我使用js库制作图库，我从官方网站下载js库，我使用给定的示例index.html页面正常工作状态良好。但是当我附加div$（'.gallery row'）.append（''）时我的问题。我的问题：图像显示，但当我点击图像，然后它没有打开与滑动div。我浪费了一整天，但什么也没得到我的代码： <!DOCTYPE html> <html> <head> <title>PhotoS

这可能是一个非常愚蠢的问题，我是javascript新手，我使用js库制作图库，我从官方网站下载js库，我使用给定的示例index.html页面正常工作状态良好。但是当我附加div

$（'.gallery row'）.append（''）时我的问题

上使用加载函数中的jquery append方法执行code>。
我的问题：图像显示，但当我点击图像，然后它没有打开与滑动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>


擦照片
//将Photosweep与库容器中的所有锚定标记一起设置
document.addEventListener（'DOMContentLoaded'，function（）{
代码.photoswip（'a'，'#Gallery'）；
}，假）；
函数加载（）{
//从该函数追加div
$（'.gallery行'）。追加（''）；
}
擦照片
我想，您需要这样做：
document.addEventListener('DOMContentLoaded', function(){

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

    }, false);

在之后追加
经过一段时间后，DOMContentLoaded在onload之前被激发
也许是href中为a标签留出的额外空间？尝试将“images/full/003.jpg”更改为“images/full/003.jpg”
在调用code.photoswip
之前，尝试在DOMContentLoaded
处理程序中执行append
。此外，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>


$（函数（）{
$（'.gallery行'）。追加（''）；
代码.photoswip（'a'，'#Gallery'）；
});

执行此操作时，请从您的
标记中删除onload=“load（）”
。
放在哪里并不重要，因为它在加载DOM时运行，而不是在添加DOM时运行。过了一段时间后，在onload之前会触发DOMContentLoaded。我要注意的是，我试着制作了一个小提琴，但至少在他们的演示页面中使用的Photosweep脚本使用了类似于jQuery1.5.2的live（）
和$.browser
，该网站称新版本正在开发中。我并没有测试下载脚本，看看我是否得到了更新版本，但它似乎仍然是旧的和过时的插件。只是说？谢谢你的回复最后我要感谢你的工作：）@Barmar我的另一个问题：当我们点击图片时，图片在Photosweep div上打开。我的问题是如何在这个分区中获取图像的url。我不知道，这似乎是针对Photosweep的，我以前从未听说过。