Javascript导致rails中的链接出现问题
Javascript causing issues with links in rails
好了，我的application.html.erb页面上有一些javascript。该页面的功能是作为正在加载的其他html页面的容器。这个问题是，我的javascript似乎是覆盖任何链接路径和/或页面上的href标签或容器内加载的任何html页面。有相当多的javascript，但我相信我已经隔离了这个问题，问题在于以下javascript。整个javascript在它下面列出。当我评论问题的javascript出来，链接再次正常运行，但当然div没有被隐藏，这是一个问题。有人能告诉我为什么代码会导致这个问题吗?javascript的解决方案是什么?
问题:
/* Wheel */
$('#wheel').hide();
$('#wheelartist').hide();
$('#wheel-link').on('click', function( e ){
var pageID = $("div.page:visible");
var $this = $(this);
//alert("Visible: " + pageID);
$(pageID).fadeTo(300, 0.1,function(){
if ( $this.hasClass('artist') ) {
$("#wheelartist").fadeIn(300);
}
else {
$("#wheel").fadeIn(300);
}
});
//$("#libPage").fadeIn("slow");
e.preventDefault();
});
$('*').on('click', function( e ){
var pageID = $("div.page:visible");
if ($("#wheel, #wheelartist").is(':visible')) {
$("#wheel, #wheelartist").fadeOut(300, function(){
$(pageID).fadeTo(300, 1.0);
});
}
e.preventDefault();
});
<script>
$(function() {
/* Page Load */
$('body').keyup(function(event) {
$('div.popup').hide();
$('div.popup:nth-child('+(event.which-47)+')').show();
switch(event.which) {
case 56:
$('div.popup.friendPics div.friendPicsCont').slimScroll({
height: '370px',
width: '350px',
position: 'right',
railVisible: false,
alwaysVisible: true,
railColor: '#4f4c6a',
opacity: .7,
color: '#4f4c6a'
});
break;
}
});
/* Clear Input */
$('#searchBox').focus(function () {
if ($(this).val() == $(this).attr("title")) {
$(this).val("");
}
}).blur(function () {
if ($(this).val() == "") {
$(this).val($(this).attr("title"));
}
});
/* Marquee */
$('#marqueeBlock div.marquee.headline, #adBlock div.marquee.ad').marquee({
speed: 18000,
gap: 50,
delayBeforeStart: 0,
direction: 'left',
duplicated: true,
pauseOnHover: true
});
/* Chat Box */
$('#chatbox').keypress(function(e) {
if(e.which == 13) {
$(this).val("");
/*$('aside#chat .convo').css({'color':'red'});*/
var chatbox = $('aside#chat .convo');
$(chatbox)/('<span>Seth:</span><p>Waddup bro!</p>');
setTimeout(function() {
$(chatbox).append('<span>Josh:</span><p>Yoo!<br>Whats up?</p>');
}, 3000);
setTimeout(function() {
$(chatbox).append('<span>Seth:</span> <p>Chillin dude<br>wbu?</p>');
}, 6000);
setTimeout(function() {
$(chatbox).append('<span>Josh:</span><p>Not too much man, just downloading some new tunes.</p>').scrollTop($(chatbox)[0].scrollHeight);
}, 9000);
setTimeout(function() {
$(chatbox).append('<span>Seth:</span><p>Dope. Who??</p>').scrollTop($(chatbox)[0].scrollHeight);
}, 12000);
setTimeout(function() {
$(chatbox).append('<span>Josh:</span><p>The new Wolfgang Gartner album :)</p>').scrollTop($(chatbox)[0].scrollHeight);
}, 15000);
setTimeout(function() {
$(chatbox).append('<span>Seth:</span><p>OMG YES!</p>').scrollTop($(chatbox)[0].scrollHeight);
}, 18000);
setTimeout(function() {
$(chatbox).append('<span>Josh:</span><p>Yea, its going down.</p>').scrollTop($(chatbox)[0].scrollHeight);
}, 21000);
}
});
/* Navigation */
var wrap = $('content');
wrap.load('register_temp/');
/*$('#wheel-link').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#wheel' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});*/
$('#profileHome-link').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#home' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
/* $('#openLib').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#libPage' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
}); */
$('#adBlock div.marquee.ad a').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#sponsorAdPage' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('.music-search-bar a').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#music-search' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#userLibrary .albumPic a').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#artistProfile' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circle a#homebuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#home' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circle a#searchbuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#musicSearch' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circle a#prefbuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#prefPage' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circle a#pointsbuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#pointsPage' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circle a#contestsbuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#contestsPage' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circle a#cartbuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#artistMerch' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circle a#directorybuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#directoryPage' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circle a#msgsbuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#msgsPage' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circleartist a#homebuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#home' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circleartist a#searchbuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#musicSearch' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circleartist a#prefbuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#prefPage' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circleartist a#pointsbuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#pointsPage' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circleartist a#contestsbuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#contestsPage' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circleartist a#cartbuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#artistMerch' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circleartist a#directorybuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#directoryPage' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circleartist a#msgsbuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#msgsPage' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circleartist a#mapbuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#artistCareerMap' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circleartist a#profitsbuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#artistProfits' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
$('#circleartist a#statsbuttonLink').on('click', function( e ) {
var href = $(this).attr('href');
wrap.load( href + '#artistStats' )
.hide().delay(100).fadeIn(500);
e.preventDefault();
});
/* Wheel
$('#wheel').hide();
$('#wheelartist').hide();
$('#wheel-link').on('click', function( e ){
var pageID = $("div.page:visible");
var $this = $(this);
//alert("Visible: " + pageID);
$(pageID).fadeTo(300, 0.1,function(){
if ( $this.hasClass('artist') ) {
$("#wheelartist").fadeIn(300);
}
else {
$("#wheel").fadeIn(300);
}
});
//$("#libPage").fadeIn("slow");
e.preventDefault();
});
$('*').on('click', function( e ){
var pageID = $("div.page:visible");
if ($("#wheel, #wheelartist").is(':visible')) {
$("#wheel, #wheelartist").fadeOut(300, function(){
$(pageID).fadeTo(300, 1.0);
});
}
e.preventDefault();
});
<!-- seems to be the javascript issue -->
*/
function grow(elem){
elem.animate({"width" : "+=7", "height":"+=7"}, 200);
}
function shrink(elem){
elem.animate({"width" : "-=7", "height":"-=7"}, 200);
}
$('.circle img, .circleartist img').mouseenter(function(){grow($(this));}).mouseleave(function(){shrink($(this));});
$("img#homebutton").click(function(){
$("#wheel, #wheelartist").fadeOut("slow");
});
$("img#msgsButton").click(function(){
$("#wheel, #wheelartist").fadeOut("slow");
});
$("img#directoryButton").click(function(){
$("#wheel, #wheelartist").fadeOut("slow");
});
$("img#cartButton").click(function(){
$("#wheel, #wheelartist").fadeOut("slow");
});
$("img#contestsButton").click(function(){
$("#wheel, #wheelartist").fadeOut("slow");
});
$("img#pointsButton").click(function(){
$("#wheel, #wheelartist").fadeOut("slow");
});
$("img#prefButton").click(function(){
$("#wheel, #wheelartist").fadeOut("slow");
});
$("img#searchButton").click(function(){
$("#wheel, #wheelartist").fadeOut("slow");
});
$("img#mapButton").click(function(){
$("#wheelartist").fadeOut("slow");
});
$("img#profitsButton").click(function(){
$("#wheelartist").fadeOut("slow");
});
$("img#statsButton").click(function(){
$("#wheelartist").fadeOut("slow");
});
/* Search */
$('#search-suggestions').on('click', function( e ){
$('#search-suggestions').toggle();
$('#searchBox').val('Search Friends, Artists, and Songs');
});
/* Library */
$('#libPage').hide();
$('#openLib, #home a.libraryButton, #profile a.libraryButton').on('click', function( e ){
var pageID = $("div.page:visible");
$(pageID).fadeTo(300, 0.05,function(){
$("#libPage").fadeIn(300);
});
e.preventDefault();
});
$('#userLibrary a, #userLibrary .libraryCloseX a').on('click', function( e ){
var pageID = $("div.page:visible");
$("#libPage").fadeOut(300, function(){
$(pageID).fadeTo(300, 1.0);
});
e.preventDefault();
});
$('.libraryScroll1').slimScroll({
height: '380px',
width: '650px',
position: 'right',
railVisible: true,
alwaysVisible: true,
//railColor: '#4f4c6a',
opacity: .7,
color: '#4f4c6a'
});
$('.librarybox2').slimScroll({
height: '380px',
width: '180px',
position: 'right',
railVisible: true,
alwaysVisible: true,
//railColor: '#4f4c6a',
opacity: .7,
color: '#4f4c6a'
});
/* Player */
/* $('a.musicNote').click(function(){
var pageID = $("div.page:visible");
//alert("Visible: " + pageID);
$(pageID).fadeOut("slow",function(){
$("#libPage").fadeIn("slow");
});
}); */
/* Radio */
$('.radio').css({
'display':'none'
});
$('a.radioTower').on('click', function( e ){
var pageID = $("div.page:visible");
$(pageID).fadeTo(300, 0.1, function(){
$('.radio').fadeIn(300);
});
e.preventDefault();
});
$('.radio img.image').on('click', function( e ){
var pageID = $("div.page:visible");
$('.radio').fadeOut(300, function(){
$(pageID).fadeTo(300, 1.0);
});
e.preventDefault();
});
/* Live Listening */
$('.live-listening').css({
'display':'none'
});
$('.icon-live-listening img').on('click', function( e ){
var pageID = $("div.page:visible");
$(pageID).fadeTo(300, 0.1, function(){
$('.live-listening').fadeIn(300);
});
e.preventDefault();
});
$('.live-listening img.image').on('click', function( e ){
var pageID = $("div.page:visible");
$('.live-listening').fadeOut(300, function(){
$(pageID).fadeTo(300, 1.0);
});
e.preventDefault();
});
});
</script>
Application.html。动词(为便于阅读已编辑代码):
<!DOCTYPE html>
<html>
<head>
<title>Atmosphere</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body leftmargin="auto" topmargin="auto" marginwidth="auto" marginheight="auto">
<div id="wrapper">
<a class="logout" href="viewmore/">View More</a>
<img class="atmov1_img" src="/assets/Atmov1_4.png">
<div class="fade-slider-edges"> </div>
<div class="fade-slider-edges2"> </div>
<div id="container2">
<div id="marqueeBlock">
</div>
</div>
<div class="advanced-slider" id="carousel">
<ul class="slides">
</ul>
</div>
<a id="ui-carousel-next"><span>next</span></a> <a id="ui-carousel-prev"><span>prev</span></a>
</div>
<form name="simple_bar" class="search" method="get" action="">
<input class="submit" type="submit" value="" >
<input id="searchBox" type="search" name="" value="Search Friends, Artists, and Songs" title="Search Friends, Artists, and Songs" size="27" maxlength="50" onFocus="if(this.value=='Search Friends, Artists, and Songs')this.value='';jQuery('#search-suggestions').toggle();">
<div id="search-suggestions">
<table>
</table>
</div>
</form>
<form name="simple_bar" class="searchLibrary" method="get" action="">
<input type="search" name="" value="Library" size="9" maxlength="30">
<input class="submit" type="submit" value="" >
</form>
<aside style="left: 10px;">
<div class="advanced-slider" id="library">
<ul class="slides">
<li class="slide">
<div class="html">
</div>
</li>
<li class="slide">
<div class="html">
</div>
</li>
<li class="slide">
<div class="html">
</div>
</li>
</ul>
</div>
<a id="openLib" class="libraryLink hvr-wobble-horizontal" href=""> </a>
<ul class="library-stats">
</ul>
</aside>
<content class="loadContent">
<ul>
<li><%= link_to "login", hud_login_path %></li>
<li><%= link_to "register", hud_register_path %></li>
</ul>
<%= yield %>
</content>
<aside id="chat">
<div class="convo">
</div>
</aside>
<a id="wheel-link" href="">
<img class="logo-left hvr-grow" src="/assets/atmosphere-logo.png" alt="">
</a>
<a id="profileHome-link" href="homepage_splash/1">
<img class="half-circles hvr-grow" src="/assets/icons/home.png" alt="">
</a>
<div class="adsLeft">
<div class="bottomLeftAds" id="responsive-slider">
<ul class="slides">
</ul>
<a class="createAnAd" href="" ></a>
</div>
</div>
<div class="playerBG">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<a class="musicNote hvr-grow" href=""> </a>
<a class="radioTower hvr-grow" href=""> </a>
<div id="cp_container_1" class="cp-container jp-container" style="z-index:9990;">
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/colorpicker/colorpicker-min.js"></script>
<!-- here are the MP3 links, which are decorated with the 360 canvas element/UI etc. -->
<div id="sm2-container">
<!-- sm2 flash goes here -->
</div>
<div class="sm2-inline-list"> <!-- remove this class to have one item per line -->
<!-- player/mp3 url housed here: -->
<div class="ui360 ui360-vis">
</div>
</div>
</div>
</ul>
<div style="text-align:center; width:600px; margin-left:auto; margin-right:auto;">
</div>
</div>
<div class="jp-no-solution">
</div>
</div>
</div>
</div>
<div class="radio">
<img class="image" src="/assets/radio-widget.png" alt=""/>
</div>
<form name="simple_bar" class="searchFriends" method="get" action="">
<input type="search" name="" value="friends" size="9" maxlength="30">
<input class="submit" type="submit" value="" >
</form>
<div class="chatBox">
<ul>
</ul>
<div style="float:left; margin-right:10px;">
<textarea id="chatbox" name="chatbox"></textarea>
</div>
<div class="friendList">
<ul>
</ul>
</div>
<span class="friendsToggle"> <a href="">◀ </a> Joshua Richard<a href=""> ▶</a></span>
</div>
<div class="live-listening">
<img class="image" src="/assets/live-listening.png" alt=""/>
</div>
<div id="libPage" style="position:absolute; top:161px; left:252px; z-index:999999;">
<div id="userLibrary">
<span style="display:block;text-align:center;margin-bottom:4px;">My Atmosphere Library</span>
<div class="librarybox1">
<div class="libraryScroll1">
<div class="albumPic">
<p><a href="artist_profile/">Adele</a></p>
<strong> 21 (2011) </strong>
<a href="artist_profile/"><img src="/assets/albums/adele21.png" alt="" /></a>
</div>
<ul>
</ul>
<div class="albumPic">
<p><a href=""></a></p>
<a href="artist_profile/"><img src="/assets/albums/aesoprockLaborDays.jpg" alt="" /></a>
</div>
<ul>
</ul>
</div>
</div>
<div class="librarybox2">
<label>Playlist <a href="">+</a></label>
<ul>
</ul>
<label></label>
</div>
<div class="myLabNav">
<img src="/assets/other_images/shuggleIcon.png"/>
<img src="/assets/other_images/rewindOne.png"/>
<img src="/assets/other_images/rewindAll.png"/>
<a class="sinkWithAtmosphere" href="" >Sync with The Atmosphere</a>
</div>
<div class="libraryCloseX"><a href=""><img src="/assets/closeX.png"/></a></div>
</div>
</div>
<div id="wheel" style="position:absolute; top:131px; left:577px; z-index:999999;">
<div id="circle" class="circle">
<a id="homebuttonLink" href="userprofile/profile/0/"><img id="homebutton" title="Home" src="/assets/icons/user.png" alt=""></a>
<a id="msgsbuttonLink" href="messages/"><img id="msgsButton" title="Messages" src="/assets/icons/mail.png" alt=""></a>
<a id="directorybuttonLink" href="directory/"><img id="directoryButton" title="Directory" src="/assets/icons/book.png" alt=""></a>
<a id="cartbuttonLink" href="shopping_cart/"><img id="cartButton" class="shopingCart" title="Shopping Cart" src="/assets/icons/shopping.png" alt=""></a>
<a id="contestsbuttonLink" href="contests_list/"><img id="contestsButton" class="planet" title="Planet" src="/assets/icons/planet.png" alt=""></a>
<a id="pointsbuttonLink" href="points/"><img id="pointsButton" class="awards" title="Awards" src="/assets/icons/awards.png" alt=""></a>
<a id="prefbuttonLink" href="preferences/"><img id="prefButton" class="tools" title="Tools" src="/assets/icons/tools.png" alt=""></a>
<a id="searchbuttonLink" href="search/"><img id="searchButton" class="headphones" title="Search" src="/assets/icons/music.png" alt=""></a>
</div>
</div>
<div id="wheelartist" style="position:absolute; top:131px; left:536px; z-index:999999;">
<div id="circleartist" class="circleartist">
<a id="homebuttonLink" href="artist_profile/"><img id="homebutton" title="Home" src="/assets/icons/user.png" alt=""></a>
<a id="msgsbuttonLink" href="messages/"><img id="msgsButton" title="Messages" src="/assets/icons/mail.png" alt=""></a>
<a id="directorybuttonLink" href="directory/"><img id="directoryButton" title="Directory" src="/assets/icons/book.png" alt=""></a>
<a id="cartbuttonLink" href="shopping_cart/"><img id="cartButton" class="shopingCart" title="Shopping Cart" src="/assets/icons/shopping.png" alt=""></a>
<a id="contestsbuttonLink" href="contests_list/"><img id="contestsButton" class="planet" title="Planet" src="/assets/icons/planet.png" alt=""></a>
<a id="pointsbuttonLink" href="points/"><img id="pointsButton" class="awards" title="Awards" src="/assets/icons/awards.png" alt=""></a>
<a id="prefbuttonLink" href="preferences/"><img id="prefButton" class="tools" title="Tools" src="/assets/icons/tools.png" alt=""></a>
<a id="searchbuttonLink" href="search/"><img id="searchButton" class="headphones" title="Search" src="/assets/icons/music.png" alt=""></a>
<a id="mapbuttonLink" href="artist_careermap/"><img id="mapButton" title="Career Map" src="/assets/icons/map.png" alt=""></a>
<a id="profitsbuttonLink" href="artist_profits/"><img id="profitsButton" title="Profits" src="/assets/icons/profits.png" alt=""></a>
<a id="statsbuttonLink" href="artist_stats/"><img id="statsButton" title="Stats" src="/assets/icons/stats.png" alt=""></a> </div>
</div>
</div>
<form id="logintype" class="logintype">
<input type="hidden" name="logintype" id="logintypeemail" value="" />
</form>
</body>
</HTML>
这是问题函数。您使用的是$('*')的非常慢的jQuery方法，它捕获DOM中的所有内容。然后你打电话给e.preventDefault()的一切抓取，从而禁用您的链接。
$('*').on('click', function( e ){ // this is a dangerous and slow
var pageID = $("div.page:visible");
if ($("#wheel, #wheelartist").is(':visible')) {
$("#wheel, #wheelartist").fadeOut(300, function(){
$(pageID).fadeTo(300, 1.0);
});
}
e.preventDefault(); // This is breaking your links.
});
最快的解决方案是删除e.p preventdefault()。如果你不能，那么我建议摆脱$('*')和使用更具体的选择器。用div包装整个页面可能会对您有用。
相关文章：
- 将外部JavaScript与Jekyll链接时出现问题
- 链接问题:下一个字符包含在<a>TinyMce ui TinyMce中的标签
- 在我的Javascript和HTML之间的表单提交按钮链接中遇到问题
- jquery对话框可见时自动下载链接问题
- 链接选择的问题
- 多个脚本导致链接问题?Javascript、CSS、HTML、Jquery
- 全球不断改变价值.可能通过引用或范围问题传递?帮助！链接中的详细示例
- 用链接 JavaScript 替换 HTML 的问题
- 对齐悬停时显示的链接时出现问题
- 解码 URI 问题 - 超链接变为纯文本
- OpenLayers 3.13:通过链接两个视图来提供绑定To的问题
- 转.js目录链接问题
- 野生动物园浮动左边的问题与断开的链接
- 航点JS和锚链接问题
- 灯箱外部链接问题
- 从手机禁用悬停的脚本是打开自窗口上的链接，我该如何解决这个问题
- jQuery .unload(） 函数问题，仅在单击特定链接时激活
- Jquery，链接/按钮的侦听器和文档就绪问题
- html5 文件中的 jquery 链接出现问题
- 引导响应式导航栏链接对齐和样式问题
