外部HTML页面没有在Firefox上的DIV内加载



我有一个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

最新更新