我有一个jQuery脚本,可以加载DIV内的外部HTML页面。这是演示http://mizan.im/testdrive/portfolio2/portfolio/在Chrome上的工作正常。但这没有在Firefox上工作。
谁能告诉我为什么它不在firefox上?
代码:
<div class="container">
<h1>Portoflio</h1>
<img id="loader" src="images/loader.gif">
<div id="portofolio-list" class="row">
<div class="col-md-3">
<a class="more" href="project1.html">
<img src="images/image1.jpg" alt="">
</a>
</div>
<div class="col-md-3">
<a class="more" href="project2.html">
<img src="images/image2.jpg" alt="">
</a>
</div>
<div class="col-md-3">
<a class="more" href="project3.html">
<img src="images/image3.jpg" alt="">
</a>
</div>
<div class="col-md-3">
<a class="more" href="project1.html">
<img src="images/image4.jpg" alt="">
</a>
</div>
<div class="col-md-3">
<a class="more" href="project2.html">
<img src="images/image1.jpg" alt="">
</a>
</div>
<div class="col-md-3">
<a class="more" href="project3.html">
<img src="images/image2.jpg" alt="">
</a>
</div>
<div class="col-md-3">
<a class="more" href="project1.html">
<img src="images/image3.jpg" alt="">
</a>
</div>
<div class="col-md-3">
<a class="more" href="project2.html">
<img src="images/image4.jpg" alt="">
</a>
</div>
</div>
<div id="ajax"></div>
<a id="back-button" href="#">Back</a>
</div>
JS
jQuery(document).ready(function($) {
$('.more').on('click', function() {
event.preventDefault();
var href = $(this).attr('href') + ' .container',
portofolioList = $('#portofolio-list'),
content = $('#ajax');
portofolioList.animate({'marginLeft':'-120%'},{duration:400,queue:false});
portofolioList.fadeOut(400);
setTimeout(function(){ $('#loader').show(); },400);
setTimeout(function(){
content.load(href, function() {
$('#ajax meta').remove();
$('#loader').hide();
content.fadeIn(600);
$('#back-button').fadeIn(600);
});
},800);
});
$('#back-button').on('click', function() {
event.preventDefault();
var portofolioList = $('#portofolio-list')
content = $('#ajax');
content.fadeOut(400);
$('#back-button').fadeOut(400);
setTimeout(function(){
portofolioList.animate({'marginLeft':'0'},{duration:400,queue:false});
portofolioList.fadeIn(600);
},800);
});
});
您缺少添加event
对象
$('.more').on('click', function(event) {
//................................^......
event.preventDefault();
$('#back-button').on('click', function(event) {
event.preventDefault();
只需添加event