Question

所以我正在开发一个包含许多html页面的网站，现在我遇到了一个让我困惑的JavaScript问题。事情是我的网站在本地工作得很好，但当我在服务器上托管它时，一些JavasScript代码停止工作（有时它工作）和有趣的事情，当它检查它时，我没有得到任何控制台JS错误更有趣的是，不起作用的JS与同一个.js文件中的其他js代码一起工作。此外，本地一切都是100％工作。好吧问题是，当我在服务器上托管它时，我的移动媒体查询下拉菜单JS停止了 - 原来代码看起来像这样：

$(function(){
    $(document).mousedown(function(){
        $('.dropdown .active').removeClass('active').children('ul').hide();
    });
    $('.dropdown').on('mousedown','.subMenu', function(e){
        e.stopPropagation();
        var elem = $(this);
        if(elem.is('.active')) {
            elem.children('ul').slideUp(150);
            elem.removeClass('active');
        } else {
           $('.dropdown .active').removeClass('active').children('ul').hide();
            elem.addClass('active').children('ul').slideDown(150);
        }
    });
    $('.subMenu').on('mousedown','ul', function(e){
        e.stopPropagation();

    });       
});

$("#footer").load("footer.html");
$("#header").load("header.html");

正如您所看到的，我正在使用单独的页脚和页眉html文件，并使用JS将它们上传到我的页面。 <div id="header"></div>这在本地完美运行，但当我将其托管到服务器时，我的移动下拉有时会起作用，有时也不会......看起来我通过编辑它设法让javascript以更好的成功率工作对此：

$(document).ready(function() {
$(function(){
    $(document).mousedown(function(){
        $('.dropdown .active').removeClass('active').children('ul').hide();
    });
    $('.dropdown').on('mousedown','.subMenu', function(e){
        e.stopPropagation();
        var elem = $(this);
        if(elem.is('.active')) {
            elem.children('ul').slideUp(150);
            elem.removeClass('active');
        } else {
           $('.dropdown .active').removeClass('active').children('ul').hide();
            elem.addClass('active').children('ul').slideDown(150);
        }
    });
    $('.subMenu').on('mousedown','ul', function(e){
        e.stopPropagation();

    });       
});
});
$("#footer").load("footer.html");
$("#header").load("header.html");

另一个重要的事情 - 每个html文件（execpt index.html）都有一个内部javascript代码，它为某个ID元素提供了一个类，该类突出显示用户所在的页面名称（按钮）。它看起来像这样。：

      <script>  
  $("#header").load("../pages/header.html", function() {
        document.getElementById('A_57').className = 'about';
        document.getElementById('A_577').className = 'about';
    }); 
      $("#footer").load("../pages/footer.html", function() {    
    }); 

      </script>

在这种情况下，它针对两个ID，因为一个ID在UL中仅在移动视图中出现而另一个UL仅在所有其他媒体查询中出现，但这并不重要。

重要的是要提出一个解决方案，其中所有3个javascript代码在服务器上协调工作。也很高兴听到本地一切正常，而在服务器上似乎Javascript代码午餐计数不同......

更新：我可以确认，当我重新加载我在其上的页面时，100％的时间下拉菜单的结果停止工作。另外从浏览器检查＆gt;网络＆gt; html我可以看到1xheader.html和1xfooter.html从200（当下拉菜单工作时）转到304（下拉菜单停止工作）。

Answer 1

Per this question，我打赌你在jQuery的.load()功能中看到了奇怪的缓存行为。尝试添加

$.ajaxSetup ({
    // Disable caching of AJAX responses
    cache: false
});

在进行任何load来电之前，请先将

添加到您的脚本中。

Answer 2

问题出在.htaccess文件中，它重定向到我的另一个外观相同的测试网页。

Javascript在本地和服务器上的行为不同

2 个答案: