我有一个页面,用ajax加载不同的项目。工作正常,但当我想看到项目正在执行clik时,不会加载包含项目描述和图库的页面。
这是我的主页:
$("#residential").on('click', function (event) {
$.ajax({
url: 'residential.html'
, dataType: 'html'
}).done(function (data) {
$('#projects').append(data);
});
});
加载div:
<div class="ten columns content" id="projects">
</div>
当我点击项目的图像时,我希望加载包含flexslider但不起作用的ajax的页面 所以在我之前加载的其他页面中。
$(document).ready(function() {
$("#galery_res").on('click', function (event) {
$.ajax({
url: 'galery_res.html'
, dataType: 'html'
}).done(function (data) {
$('#projects').append(data); // the same div of the main page
});
});
});
带有flex滑块的页面:(加载没有css的图像)
<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />
<body class="loading">
<div id="container">
<div id="main" role="main">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/galeria1.jpg" />
</li>
<li>
<img src="images/galeria1.jpg" />
</li>
<li>
<img src="images/galeria1.jpg" />
</li>
<li>
<img src="images/galeria1.jpg" />
</li>
</ul>
</div>
</section>
</div>
</div>
<!-- jQuery -->
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<!-- FlexSlider -->
<script defer src="jquery.flexslider.js"></script>
<script type="text/javascript">
$(function(){
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
});
</script>
答案 0 :(得分:1)
$(document).ready(function() {
$("#galery_res").on('click', function (event) {
$.ajax({
url: 'galery_res.html'
, dataType: 'html'
}).done(function (data) {
$('#projects').append(data); // the same div of the main page
$('.flexslider').flexslider({
animation: "slide"
});
});
});
});
我认为$('#projects').append(data);
不是$('#proyects').append(data);