External html page is not loading inside div on firefox

Question

I have a jquery script to load external html page inside a div. here is the demo http://mizan.im/testdrive/portfolio2/portfolio/ its working fine on chrome. But it's not working on firefox.

Can anyone tell me why it's not working on firefox??

Code:

<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);
});

});

Answer 1

You are missing to add event object

$('.more').on('click', function(event) {
//................................^......
    event.preventDefault();

Answer 2

$('#back-button').on('click', function(event) {
    event.preventDefault();

just add event