如果我加载另一个页面，我的 jQuery 将停止工作答案

【问题标题】：My jQuery stops working if I load another page如果我加载另一个页面，我的 jQuery 将停止工作
【发布时间】：2014-02-28 13:35:54
【问题描述】：

我将全部重写，因为可能我没有很好地解释自己（对不起我的英语不好）。
我有 2 个 html 页面：index.hmtl 和 info.html。
所有 html 页面都有一个带有页面名称的 div 和一个小菜单图标，当您单击该图标时，菜单会出现和消失（类似于 facebook 应用程序中的菜单）。为了切换可见和不可见，我切换了两个类。如果我打开我的 html.it 并单击菜单按钮，它运行良好，菜单出现并消失。
菜单是一个链接到其他 html 页面的 ul。如果您单击链接，浏览器将加载该页面（例如 info.html），其上部具有相同的 div（页面名称和小图标）和不同的内容。如果我单击 info.html 页面中的图标菜单，则菜单的切换不起作用。如果我刷新 info.html 页面，菜单图标将显示并隐藏 ul 菜单。

我在所有页面中的代码（对于标题部分）是：

<div id ="header-status" data-role="header" data-position="fixed" data-theme="a">
     <img id="menu" src="img/menu.png" /> <h2>Pas.si</h2>
 </div>

 <ul id="listamenu" class="classmenua">
     <li> <a href="index.html"> Percorsi </a> </li>
     <li>  <a href="info.html"> Info </a> </li>
     <li> <a href="ARworld.html"> World </a> </li>
 </ul>

 <div class="content">
 [..........]
 </div>

<script type="text/javascript">
        $('#menu').click(function() {
                         $('#listamenu').toggleClass('classmenub', 'classmenua');
                }
          );
 </script>

使用的css类在所有html页面中加载的css文件中。这是这部分的css：

#listamenu{ width:80%;
        height:100%;
        background-color:#0CF;
        margin:0;
        position:absolute;
        padding:0;
}
#listamenu li{ list-style:none;
            padding:10px;
            color:#fff;
}
#listamenu li a{ color:#fff;
            font-weight:normal;
}
#listamenu li:active{ color:#0CF;
            background-color:#fff;
}
.classmenua{ visibility:hidden;
        z-index:-1;
}
.classmenub{ visibility:visible;
        z-index:1;
}

返回假；不工作。
.toggleClass('classmenub classmenua') 可以切换菜单，但如果我进入另一个页面会出现同样的错误
控制台没有错误，我在 Firefox 上测试，最后更新：D
希望你现在能理解XD再次抱歉

【问题讨论】：

你有什么错误吗？你确定在你调用它的时候已经加载了 jQuery 吗？
您能在您使用的浏览器上进入控制台，看看是否列出了任何错误吗？它通常还会为您提供行号，以便您可以将其与您的代码相对应。
java 停止工作是什么意思？从外观上看，您的脚本仅在当前页面内。您在其他页面中是否也有相同的脚本？
控制台没有给出错误:(这是侧面的“标题”部分，菜单和页面标题，我需要在所有页面中使用它（相同的html + java）。

标签： javascript jquery html css

【解决方案1】：

如果我是正确的，您唯一想做的就是切换菜单。而且切换按钮不是一个链接，所以我们不必使用诸如 preventDefault 之类的东西。

我复制了您的代码并让它正常工作。我想知道的是你到底把 jQ i 放在了哪里

以下示例适用于更改类。尝试使用这种结构，看看它是否适合您。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id ="header-status" data-role="header" data-position="fixed" data-theme="a">
    <img id="menu" src="img/menu.png">
     <h2>Pas.si</h2>
 </div>

 <ul id="listamenu" class="classmenua">
     <li> <a href="index.html"> Percorsi </a> </li>
     <li>  <a href="info.html"> Info </a> </li>
     <li> <a href="ARworld.html"> World </a> </li>
 </ul>
<!-- Include javascript before the closing body tag </body> -->
<!-- jQuery include via CDN -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<!-- Here comes your own scipt (after the include) -->
<script type="text/javascript">
        $('#menu').click(function() {
                         $('#listamenu').toggleClass('classmenub', 'classmenua');
                }
          );
 </script>

</body>
</html>

当 jQuery 被放置在结束 body 标记之前。如果 DOM 准备好加载，它将被触发。否则你需要使用：

$('document').ready(function(){
     //your code here
});

我更喜欢第一个选项。

【讨论】：

这在 info.html 中工作，但是当我从菜单返回 index.html 时停止工作 -.- 这是一个奇怪的行为
你在这两个文件中都粘贴了上面的内容吗？

【解决方案2】：

检查docs，如果您向toggleClass 提供两个这样的参数

.toggleClass( className, switch )

第二个将被视为布尔值，这可能不是您想要的。

如果您只想切换一个类列表，请在一个参数中提供它们，但用空格分隔，如下所示：

.toggleClass('classmenub classmenua')

【讨论】：

我已经上传了主要问题，对不起我的英语不好，希望现在你能理解这个问题：D
好的，是时候进行一些调试了。在点击处理程序之前添加console.log($('#listamenu').attr("class"));。在进行刷新之前，info.html 上的控制台（按 F12）中显示了什么？
hmm ok index.html 19:40:38.681 SyntaxError: 不推荐使用 //@ 来指示 sourceMappingURL 杂注。使用 //# 代替 jquery-1.9.1.min.js:1 19:40:38.748 SyntaxError: 使用 //@ 表示 sourceMappingURL 杂注已被弃用。使用 //# 代替 jquery.mobile-1.3.2.min.js:7 19:40:38.800 "classmenua" index.html:59 19:40:38.825 È stata trasmessa una stringa vuota a getElementById()。 jquery.mobile-1.3.2.min.js:6 19:40:38.873 L'utilizzo di getPreventDefault() è deprecato。 Al suo posto utilizzare defaultPrevented。 jquery-1.9.1.min.js:3 19:40:38.900 TypeError: parentElement is null index.js:121
刷新前的 info.html 19:40:38.681 SyntaxError: 不推荐使用 //@ 来指示 sourceMappingURL 杂注。使用 //# 代替 jquery-1.9.1.min.js:1 19:40:38.748 SyntaxError: 使用 //@ 表示 sourceMappingURL 杂注已被弃用。使用 //# 代替 jquery.mobile-1.3.2.min.js:7 19:40:38.800 "classmenua" index.html:59 19:40:38.825 È stata trasmessa una stringa vuota a getElementById()。 jquery.mobile-1.3.2.min.js:6 19:40:38.873 L'utilizzo di getPreventDefault() è deprecato。 Al suo posto utilizzare defaultPrevented。 jquery-1.9.1.min.js:3
我的意大利语很差，但看起来有几个 javascript 错误，这将使您的菜单停止工作。如果你修复了这些，我怀疑上面的代码会起作用。您似乎也在使用 jQuery Mobile - 如果您发布新问题，请务必使用该标签而不是“jquery”。

【解决方案3】：

在 JQuery 中，如果您希望 click 默认事件不发生，您可以通过在事件处理程序末尾添加 return false 来实现。

$({
  $('#menu a').click(function() {
    $('#listamenu').toggleClass('classmenub classmenua');
    return false;
   });
 });

fiddle 显示了您的代码的工作示例。

这个SO question解释的很好：

在 jQuery 事件处理程序中return false 实际上与在传递的 jQuery.Event 对象上调用 e.preventDefault 和 e.stopPropagation 相同。

e.preventDefault() 将阻止默认事件发生，e.stopPropagation() 将阻止事件冒泡，并且 return false 将同时进行。请注意，此行为不同于普通（非 jQuery）事件处理程序，其中值得注意的是，return false 不会阻止事件冒泡。

【讨论】：

返回false；不行，我在问这个问题之前已经试过了。确保我在您发表评论后再次尝试过，但没有。我有同样的问题...
@Lirael 我在答案中添加了您的代码的工作example。
@Lirael 我不确定我是否明白你在问什么。描述还不够，还需要具体的例子和代码给大家看。此外，您需要更新问题和代码示例，以反映您真正想要的内容。
我已经上传了主要问题，对不起我的英语不好，希望现在你能理解这个问题：D 谢谢