在div上使用jquery append方法附加div
[英]Append a div using jquery append method on div
问题描述
这可能是一个很愚蠢的问题，我是javascript的新手，我使用http://photoswipe.com/ js库制作了一个图片库，我从官方网站下载了js库，并使用了给定的示例index.html页面正常工作正常。 但是当我追加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>'); 在<div class="gallery-row"></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>
3 个解决方案
解决方案1
1 已采纳 2014-06-13 16:07:41
在调用Code.photoSwipe之前，请尝试在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>
执行此操作时，请从您的<body>标记中删除onload="load()" 。
解决方案2
0 2014-06-13 16:03:50
我想，您需要这样做：
document.addEventListener('DOMContentLoaded', function(){
Code.photoSwipe('a', '#Gallery');
}, false);
追加之后
经过一些测试后 ， 在onload之前会触发DOMContentLoaded
解决方案3
0 2014-06-13 16:05:49
也许这是标签的href多余空间？ 尝试将“ images / full /003.jpg”更改为“ images / full / 003.jpg”
使用jQuery将数据追加到div
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.