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

這可能是非常愚蠢的問題，我是新的JavaScript，我使用http://photoswipe.com/ js庫製作圖庫，我從官方網站下載js庫，我使用了給定的示例index.html頁面正常工作正常。但我的問題，當我在<div class="gallery-row"></div>追加div $('.gallery-row').append('<div class="gallery-item"><a href="images/full/003.jpg"><img src="images/thumb/003.jpg" alt="Image 003" /></a></div>');使用jquery append方法從加載函數。我的問題：圖像顯示，但當我點擊圖像，然後它不打開與刷卡div。我浪費了我整整一天，但沒有得到任何東西。在div上使用jquery append方法追加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>

來源

2014-06-13 user3245211

嘗試在DOMContentLoaded處理程序中執行append，然後再調用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>

當你做到這一點，從您<body>標記刪除onload="load()"。

來源

2014-06-13 16:07:41 Barmar

我只會注意到我嘗試了一個小提琴，但至少在他們的演示頁面中使用了photoSwipe腳本使用jQuery 1.5.2中的'live（）'和'$ .browser'之類的東西，該網站說正在開發一個新版本。我沒有測試下載腳本以查看我是否獲得了更新版本，但它仍然看起來像插件是舊的和過時的。只是說？ – adeneo

thanx回覆終於它的工作，我想謝謝你soooooooo太多:) – user3245211

@Barmar我的另一個問題：當我們點擊圖像，圖像打開PhotoSwipe div。我的問題怎麼能得到這個div的圖像的網址。 – user3245211

我猜，你需要這樣做：

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

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

    }, false);

的後追加

一些Test後，DOMContentLoaded之前解僱onload

來源

2014-06-13 16:03:50

放置它並不重要，因爲它在DOM加載時運行，而不是在添加DOM時運行。 – Barmar

經過一些[測試]（http://jsfiddle.net/HgJ33/1/），DOMContentLoaded在onload之前被觸發 –

也許這是在你的標籤的HREF額外的空間？嘗試將「images/full /003.jpg」更改爲「images/full/003.jpg」

來源

2014-06-13 16:05:49 matt

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

回答

相關問題