Le clic du déclencheur jQuery donne "trop ​​de récursivité"

Je suis tryin' pour faire le lien cliquable sur l'ensemble de l'article dans l'espace.

Tout d'abord, je n'ai hover chose, changeant de couleur à la souris et ainsi de suite... puis sur cliquez sur il devrait déclencher le lien, mais cela donne un "trop de récursivité".

Je pense que c'est un event bubbling problème. J'ai essayé de travailler avec event.cancelBubble = true; ou stopPropagation() avec pas de chance. Pire chance!

quelqu'un?

    $("div.boxContent").each(function() {
if ($(this).find(".btn").length) {
var $fade = $(this).find("div.btn a > span.hover");
var $title = $(this).find("h1, h2, h3, h4, h5");
var $span = $(this).find("span").not("span.hover");
var $text = $(this).find("p");
var titleColor = $title.css('color');
var spanColor = $span.css('color');
$(this).css({'cursor':'pointer'}).bind({
mouseenter:function() {
$text.stop().animate({color:linkHover},textAnim);
$title.stop().animate({color:linkHover},textAnim);
$span.stop().animate({color:linkHover},textAnim);
$fade.stop(true,true).fadeIn(textAnim);
}, mouseleave:function() {
$text.stop().animate({color:linkColor},textAnim);
$title.stop().animate({color:titleColor},textAnim);
$span.stop().animate({color:spanColor},textAnim);
$fade.stop(true,true).fadeOut(textAnim);
}, focusin:function() {
$text.stop().animate({color:linkHover},textAnim);
$title.stop().animate({color:linkHover},textAnim);
$span.stop().animate({color:linkHover},textAnim);
$fade.stop(true,true).fadeIn(textAnim);
}, focusout:function() {
$text.stop().animate({color:linkColor},textAnim);
$title.stop().animate({color:titleColor},textAnim);
$span.stop().animate({color:spanColor},textAnim);
$fade.stop(true,true).fadeOut(textAnim);
}
}).click(function() {
$(this).find("div.btn a").trigger('click');
});
}
});

source d'informationauteur Thomas

  1. 27

    Le problème de votre code est: est-ce

    $("div.boxContent") /* miss the each function */
.click(function() {
$(this).find("div.btn a").trigger('click');
});

    Ce dit "chaque fois qu'un événement de clic est reçu sur cet élément, déclencher un clic sur l'élément descendant". Cependant, la remontée d'événements signifie que l'événement a déclenché dans cette fonction sont ensuite traités à nouveau par ce gestionnaire d'événements, à l'infini. Le meilleur moyen d'arrêter cela est, je pense, pour voir si l'événement provient de la div.btn a élément. Vous pouvez utiliser et événement.cible pour cela:

    $("div.boxContent") /* miss the each function */
.click(function(event) {
if (!$(event.target).is('div.btn a')) {
$(this).find("div.btn a").trigger('click');
}
});

    Ce dit "si le clic est apparu sur n'importe quel élément à part un div.btn ade déclenchement d'un événement de clic sur div.btn a. Cela signifie que les événements causés par la trigger appel ne sera pas traitée par cette fonction. Il est supérieur à la vérification de event.target == this (comme Andy réponse a), car il peut faire face à d'autres éléments existant au sein de l' div.boxContent.

  2. -1

    D'une façon plus propre à résoudre ce problème est de prendre le l'élément de déclenchement de la cliquez sur pour et de le mettre à l'extérieur de l'déclenché élément:

    Donc si vous avez ceci:

    <div class="boxContent">
<div class="btn">
<a href="#">link</a> <!-- move this line... -->
</div>
</div>
<!-- ... to here. -->
<script>
$("div.boxContent") /* miss the each function */
.click(function() {
$(this).find("div.btn a").trigger('click');
});
</script>

    Par le déplacement de la "div.btn une" étiquette à l'extérieur de la "boxContent" div. Vous éviter la récurrence de la boucle tous ensemble.