2010-08-01 5 views
2

Je suis à peu près travaille avec les éléments suivants:JQuery et événement bouillonnant ... Encore une fois

var i; 
var k = 5; 
$('document').ready(function() { 
    $('#someElement').click(function (e) { 
     e.stopImmediatePropagation(); 
     i++; 
     if (i >= k) { 
      my_function(); 
     }); 
    } 
}); 
my_function() { 
    alert(i); 
    $('#myDisplay').text("You have clicked on '#someElement' " + i + "times"); 
} 

'my_function() se déclenche lorsque je clique sur « #someElement », comme prévu, mais le Alertbox apparaît 5 FOIS!!!. Une solution rapide et évidente consisterait à placer le contenu de my_function() et à les placer dans l'instruction de contrôle if attachée à '#someElement', mais je suis très désireux de conserver la structure que j'ai décrite, et je suis sûr qu'il y a un moyen simple de le faire.

Des idées?

MISE À JOUR

Je suppose que l'origine du problème était avec l'appel de fonction à partir de mon événement « clic ». Il n'a pas été, je pense que le problème peut avoir quelque chose à voir avec l'appel imbriqué « ajaxComplete »:

var i = 0; 

$('document').ready(function() { 

    $('<div id="someElement">Click me</div>').appendTo('body'); 
    $('<div id="myDisplay"></div>').appendTo('body'); 
    $('#someElement').click(function (e) { 
     i++; 
     $.get("test.html", function(html) 
     {  
      $(html).ajaxComplete(function() 
      { 
       my_function(i); 
      }); 
     }); 

    }); 

}); 

function my_function(n) 
{ 

    switch (n) 
    { 

    case 1: 
     alert(n); 
     $('#myDisplay').text("this is case " + n); 
     break 
    case 2: 
     alert(n); 
     $('#myDisplay').text("this is case " + n); 
     break 
    case 3: 
     alert(n); 
     $('#myDisplay').text("this is case " + n); 
     break 

    default: 
     alert('A great detective always breaks the case. :)'); 
     break 

    } 

} 

J'ai omis le « k » constante, comme les déclarations de cas rendent le « si » déclaration l'exemple précédent est inutile. Le code ci-dessus fournit une meilleure illustration du problème que j'ai rencontré.

Toute aide sera grandement appréciée. :)

+0

Indiquez d'abord correctement le code. – Anders

Répondre

3

Modifier basé sur la question mise à jour:

Le problème est que vous appelez $.ajaxComplete() dans votre rappel. Vous devriez vous en débarrasser. La fonction de rappel anonyme est tout ce dont vous avez besoin.

Le but de $.ajaxComplete() est de configurer une fonction par défaut à exécuter lorsque une requête ajax se termine. Si c'est ce que vous voulez, vous devez le retirer du rappel en cours et le placer dans l'appel .ready() pour qu'il ne s'exécute qu'une seule fois.

La façon dont vous le faites maintenant, pour chaque clic (et réponse réussie) vous ajoutez un autre gestionnaire identique. Donc, après avoir cliqué 5 fois, il a maintenant 5 du même gestionnaire de clic.

De la documentation:http://api.jquery.com/ajaxComplete/

Chaque fois qu'une requête Ajax complète, jQuery déclenche l'événement ajaxComplete. Tous les gestionnaires qui ont été enregistrés avec la méthode .ajaxComplete() sont exécutés à ce moment.


réponse originale

Cela ne doit pas être votre code réel, car il ne fonctionne pas du tout la façon dont vous l'avez.

Vous n'avez pas de déclaration function pour votre fonction. Vous devez initialiser i avec une valeur comme 0 et la parenthèse de fermeture pour le gestionnaire click est égarée.

Cela dit, votre code fonctionne bien pour moi lorsqu'il est corrigé.

Essayez-:http://jsfiddle.net/sGWjL/1/

Si l'alerte apparaît 5 fois pour vous, alors vous devez coller plus (ou réelle) du code utilisé.

var i = 0; 
var k = 5; 

$('document').ready(function() { 
    $('#someElement').click(function (e) { 
     e.stopImmediatePropagation(); 
     i++; 
     if (i >= k) { 
      my_function(); 
     } 
    }); 
}); 

function my_function() { 
    alert(i); 
    $('#myDisplay').text("You have clicked on '#someElement' " + i + "times"); 
}​ 
+0

Merci pour les réponses rapides! J'aime vraiment cette application jsfiddle.net, au fait. ;) Je ferai aussi un effort pour mettre en retrait mon code avant de poster. Mis à part l'erreur élémentaire que j'ai faite avec la variable non déclarée, le code a bien fonctionné. J'ai modifié mon article original pour présenter un exemple de code qui reflète mieux le problème que j'ai rencontré. Salut à tous. :) – Leonard

+0

@Leonard - J'ai mis à jour ma réponse (voir ci-dessus). Fondamentalement, vous devez soit vous débarrasser de '.ajaxComplete()', et simplement appeler 'my_function()' dans votre callback, ou si vous voulez '.ajaxComplete()', ne l'appeler qu'une fois *. En ce moment, vous l'appelez une fois pour * chaque * réponse ajax. – user113716

Questions connexes