jQuery的兒童A HREF點擊不起作用

我有這樣的代碼：jQuery的兒童A HREF點擊不起作用

<html> 
<head> 
<title>site</title> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('#wlink a').click(function() { 
     $('.box:visible').fadeOut('fast', function() { 
      $('#' + (this.id).replace('link', '')).fadeIn('fast'); 
     }); 
     $('#wlink a').removeClass('selected'); 
     $(this).addClass('selected'); 
    }); 
    $('#wlink div').click(function() { 
     var child = $(this).children(); 
     child.click(); 
    }); 
    $('#linkbox1').addClass('selected'); 
    $('#box1').fadeIn('fast'); 
}); 
</script> 
</head> 

<style> 
a { outline: none; cursor: pointer; } 
#wrapper { border:1px solid #cccccc; border:solid 1px #ddd; width:806px; height:255px; overflow: hidden; } 
#wrapperBox { width:6000px; } 
span.text { font-size:100px; color:#aaa; } 
div.box { float:left; width:805px; height:255px; background:#efefef; display: none; } 
#wlink div { width: 200px; text-align:center; display: block; float:left; border: solid 1px #ddd; } 
a.selected { background: #eee; } 
</style> 

<body> 
<div id="wrapper"> 
    <div id="wrapperBox"> 
     <div id="box1" class="box"> 
      <span class="text">Box 1</span> 
     </div> 
     <div id="box2" class="box"> 
      <span class="text">Box 2</span> 
     </div> 
     <div id="box3" class="box"> 
      <span class="text">Box 3</span> 
     </div> 
     <div id="box4" class="box"> 
      <span class="text">Box 4</span> 
     </div> 
    </div> 
</div> 
<div id="wlink"> 
    <div><a id="linkbox1">Box 1</a></div> 
    <div><a id="linkbox2">Box 2</a></div> 
    <div><a id="linkbox3">Box 3</a></div> 
    <div><a id="linkbox4">Box 4</a></div> 
</div> 
</body> 
</html>

現在我想做的是在點擊A HREF的父母DIV的時候，我想模擬的HREF點擊。但它不起作用，我得到這個錯誤：

too much recursion 
[Break On This Error])});return}if(e.nodeType===3||e.nodeTy...nt=="undefined"&&(b=b.ownerDocument||

我的代碼有什麼問題？

感謝，J

來源

2011-09-15 Tech4Wilco

sillyMunky是正確的，你的div點擊處理程序也會被解僱，創建一個無限循環，但他解決這個問題的方法並不是最佳實踐。你想要做的是明確停止事件傳播與e.stopPropagation()在您的點擊處理程序和而不是return false。使用return false將做比您需要/打算更多。如果您還想阻止默認點擊操作並停止頁面跳轉，則還需要添加e.preventDefault()。

$('#wlink a').click(function(e) { 
    e.stopPropagation(); 
    e.preventDefault(); //not part of fixing your issue, but you may want it. 
    $('.box:visible').fadeOut('fast', function() { 
     $('#' + (this.id).replace('link', '')).fadeIn('fast'); 
    }); 
    $('#wlink a').removeClass('selected'); 
    $(this).addClass('selected'); 
});

欲瞭解更多信息：Stop (Mis)using Return False

來源

2011-09-15 13:57:47

我以爲他想stopPropagation和的preventDefault，最有效的方式做到這一點只是返回false。此外，我親身體驗過這兩個函數的瀏覽器兼容性問題，但從來沒有使用return false。我不同意使用返回虛假是不好的做法，有人決定在他們的博客上說更好的做法並不會削減我的任何芥末。如果他需要默認操作但不冒泡，那麼正確的答案就是使用e.stopPropagation。我更喜歡我更優雅的答案。 – sillyMunky

指出鏈接中的這些內容並提供一個替代方案是一個好的呼叫，也許OP以前沒有遇到過。但我認爲這是一個'最佳做法'，這是漫長的一輪並不是那麼有用。 – sillyMunky

你認爲他沒有明確地說出來，我認爲這是不利的。新手需要了解他們的代碼在做什麼，爲什麼他們應該以某種方式寫它。如果OP在理解其含義的時候想要「返回假」，那很好。什麼是傷害是說「只是返回假，以防止傳播」，當這並非全部返回false並可能有其他負面影響。我在說：「這就是你所要求的代碼，這裏是實際返回錯誤的代碼，明智地使用。」真的，這並不是什麼大不了的事情。 –

這足以補充return false;到錨的點擊處理程序結束。問題似乎是被觸發的點擊處理程序然後冒泡到包含它的div，從而形成無限遞歸循環。添加返回false將阻止事件傳播（將層次結構展開到父元素）以及正在執行的默認操作（如果鏈接被點擊，則在該鏈接之後）。

如果您願意，您可以使用事件對象的各個函數（分別爲e.stopPropagation和e.preventDefault）來完成此操作，但是您更可能（以我的經驗）在目標瀏覽器中發生問題，而不是同時使用return false;技術同時進行。

$('#wlink a').click(function() { 
    $('.box:visible').fadeOut('fast', function() { 
     $('#' + (this.id).replace('link', '')).fadeIn('fast'); 
    }); 
    $('#wlink a').removeClass('selected'); 
    $(this).addClass('selected'); 
    return false; 
})

來源

2011-09-15 13:54:48 sillyMunky

當我上盒2或3盒框單擊1顯示 – Tech4Wilco

我認爲你的問題在於事實上你綁定了一個點擊事件到div和錨（它被同一個div包裹）。所以當有人點擊div或其中的任何鏈接時，兩個點擊事件都會觸發。

來源

2011-09-15 13:57:36

@Adam Terlson有一個很好的解決方案，如果你不想改變你的代碼。這是我的解決方案：

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>site</title> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$('#wlink a').click(function() { 
    var l = (this.id).replace('link', ''); 
    $('.box:visible').fadeOut('fast', function() { 
     $('#' + l).fadeIn('fast'); 
    }); 
    $('#wlink a').removeClass('selected'); 
    $(this).addClass('selected'); 
}); 
$('#linkbox1').addClass('selected'); 
$('#box1').fadeIn('fast'); 
}); 
</script> 

</head> 

<style> 
a { outline: none; } 
#wrapper { border:1px solid #cccccc; border:solid 1px #ddd; width:806px; height:255px; overflow: hidden; } 
#wrapperBox { width:6000px; } 
span.text { font-size:100px; color:#aaa; } 
div.box { float:left; width:805px; height:255px; background:#efefef; display: none; } 
a.linkBox { cursor: pointer; width: 200px; text-align:center; display: block; float:left; border: solid 1px #ddd; } 
a.selected { background: #eee; } 
</style> 

<body> 

<div id="wrapper"> 
    <div id="wrapperBox"> 
     <div id="box1" class="box"> 
      <span class="text">Box 1</span> 
     </div> 
     <div id="box2" class="box"> 
      <span class="text">Box 2</span> 
     </div> 
     <div id="box3" class="box"> 
      <span class="text">Box 3</span> 
     </div> 
     <div id="box4" class="box"> 
      <span class="text">Box 4</span> 
     </div> 
    </div> 
</div> 
<div id="wlink"> 
    <a class="linkBox" id="linkbox1">Box 1</a> 
    <a class="linkBox" id="linkbox2">Box 2</a> 
    <a class="linkBox" id="linkbox3">Box 3</a> 
    <a class="linkBox" id="linkbox4">Box 4</a> 
</div> 

</body> 
</html>

它沒有調用任何以前的答案，而是使用沒有DIV的HREF並使用CSS來實現魔法。這樣，您就不必選擇兒童，家長等..

來源

2011-09-15 22:54:07

我認爲這樣更容易理解，但我有太多的代碼需要改變。謝謝 – Tech4Wilco

jQuery的兒童A HREF點擊不起作用

回答

相關問題