Question

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

}）;

Answer 1

您缺少添加event对象

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

Answer 2

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

只需添加event

外部html页面没有在firefox上的div内加载

2 个答案: