如果我加载另一个页面，我的jQuery将停止工作
[英]My jQuery stops working if I load another page
问题描述
I'll rewrite all because probably I've not explained myself very well (sorry for my bad english). 
我将全部重写，因为可能我对自己的解释不够好（对不起我的英语不好）。
I have 2 html pages: index.hmtl and info.html. 我有2个html页面：index.hmtl和info.html。
All html pages have a div with the name of the page and a small menu icon, when you click on the icon the menu appears and disappears (something like menu in facebook app). 所有的html页面都有一个div，带有页面名称和一个小菜单图标，当您单击该图标时，菜单就会出现并消失（类似于facebook应用中的菜单）。 to have this switching of visible and invisible I've toggled two classes. 为了切换可见和不可见，我切换了两个类。 If I open my html.it and click on the menu button it works well, the menu appears and disappears. 如果我打开html.it并单击菜单按钮，则效果很好，菜单出现并消失。
The menu is an ul with link to others html page. 该菜单是ul，带有指向其他html页面的链接。 If you click on a link the browser will load that page (ex. info.html) with the same div in the upper part (page name and small icon) and different content. 如果单击链接，浏览器将加载该页面（例如info.html），该页面的上部具有相同的div（页面名称和小图标），且内容不同。 If I click on the icon menu in info.html page the switchig of the menu doesn't work. 如果单击info.html页面中的图标菜单，则菜单的切换将不起作用。 If i refresh the info.html page the menu icon works showing and hidind the ul menu. 如果我刷新info.html页面，则菜单图标将显示并隐藏ul菜单。
My code in all pages (for the header part) is: 我在所有页面（标题部分）中的代码是：
<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 class used are in a css file loaded in all html pages. 使用的css类在所有html页面中加载的css文件中。 this is css of this part: 这是这部分的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;
}
return false; 返回false； doesn't work. 不起作用。
.toggleClass('classmenub classmenua') work to switch the menu but gives the same error if i go in another page .toggleClass（'classmenub classmenua'）可以切换菜单，但是如果我进入另一页会给出相同的错误
console gives no errors, i'm testing on firefox, last update :D 控制台没有错误，我正在firefox上进行测试，最后更新：D
Hope you can understand now XD sorry again 希望您现在能理解XD再次对不起
3 个解决方案
解决方案1
0 2014-02-28 13:49:37
In JQuery, you do this by adding return false at the end of the event handler, if you want the click default event not to occur. 在JQuery中，如果您不想发生click默认事件，可以通过在事件处理程序的末尾添加return false来实现。
$({
$('#menu a').click(function() {
$('#listamenu').toggleClass('classmenub classmenua');
return false;
});
});
This fiddle shows a working example of your code. 这个小提琴显示了您的代码的有效示例。
This SO question explains it very well: 这样的问题很好地解释了它：
return falsefrom within a jQuery event handler is effectively the same as calling both e.preventDefault and e.stopPropagation on the passed jQuery.Event object.return false实际上与在传递的jQuery.Event对象上调用e.preventDefault和e.stopPropagation相同。
e.preventDefault()will prevent the default event from occuring,e.stopPropagation()will prevent the event from bubbling up and return false will do both.e.preventDefault()将阻止默认事件的发生，e.stopPropagation()将阻止事件的冒泡并返回false会同时执行这两项操作。 Note that this behaviour differs from normal (non-jQuery) event handlers, in which, notably, return false does not stop the event from bubbling up.
解决方案2
0 2014-02-28 15:52:54
Checking the docs , if you provide two arguments like this to toggleClass 检查docs ，是否提供了像toggleClass这样的两个参数
.toggleClass( className, switch )
the second one will be treated as a boolean, which is probably not what you intend. 第二个将被视为布尔值，这可能不是您想要的。
If you want to just toggle a list of classes, provide them in one argument, but separated by spaces, like this: 如果只想切换一个类列表，请在一个参数中提供它们，但用空格分隔，如下所示：
.toggleClass('classmenub classmenua')
解决方案3
0 已采纳 2014-03-01 08:31:22
If I'm correct the only thing you want to do is toggle the menu. 如果我答对了，您唯一要做的就是切换菜单。 And the toggle button is not a link so we don't have to use something like preventDefault etc. 而且切换按钮不是链接，因此我们不必使用诸如preventDefault等之类的东西。
I copied your code and got it working just fine. 我复制了您的代码，并使其正常运行。 What I wonder is where you exactly have placed the jQ i should be just above the 我想知道的是，您将jQ i确切地放置在哪里？
the following example works the classes get changed. 以下示例可更改类。 Try to use this structure and see if it works for you. 尝试使用此结构，看看它是否适合您。
<!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>
When jQuery is placed before the closing body tag. 当jQuery放在结束body标记之前。 It will be triggered if the DOM is ready with loading. 如果DOM已准备好加载，它将被触发。 Other wise you need to use: 其他方面，您需要使用：
$('document').ready(function(){
//your code here
});
I prefer the first option. 我更喜欢第一种选择。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.