2011-01-16 2 views
3

Hey, j'ai ce morceau de jQuery/Javascript:jQuery .cliquez() ne fonctionne pas avec setInterval

$(document).ready(function() { 
       var points = 0; 
       var iterations = 10; 
       var winWidth = $(window).width(); 
       var winHeight = $(window).height(); 

       setInterval(function() { 
        if (iterations > 0) { 
         var rndX = Math.ceil(Math.random() * winWidth); 
         var rndY = Math.ceil(Math.random() * winHeight); 
         $('div.item').remove(); 
         $('body').append('<div class="item" style="left: '+rndX+'px; top: '+rndY+'px;"></div>'); 
         iterations--; 
        } else { 
         location.href = "http://www.google.com/"; 
         $('*').remove(); 
        } 
       }, 1750); 

       $('div.item').click(function() { 
        $(this).remove(); 
        points = points + 1; 
        $('#points').val(points); 
        return false; 
       }); 

      }); 

Mais pour une raison quelconque, le $('div.item').click(function() ne se déclenche pas :(

Toutes les idées ?

Répondre

9

Au lieu d'utiliser "cliquez sur", utilisez "délégué":

$('body').delegate('div.item', 'click', function() { 
    $(this).remove(); 
    points = points + 1; 
    $('#points').val(points); 
    return false; 
}); 

Lorsque votre gestionnaire de morue intervalle e supprime tous les éléments "div.item" du document, ce qui supprime également les gestionnaires que vous avez créés. En utilisant "delegate" à la place, vous mettez juste un gestionnaire sur l'élément <body>, et il profite de l'événement bubbling pour gérer tous les clics. Ceux qui proviennent d'éléments qui correspondent au sélecteur "div.item" seront traités avec votre code, comme si le gestionnaire avait été directement lié aux éléments. Comme le mécanisme "delegate" applique le sélecteur au moment où les événements se produisent, peu importe que l'élément cible existe depuis la première réception de la page ou que l'élément ait été ajouté dynamiquement (comme c'est le cas). dans votre code).

+0

Impressionnant, ty - va "cocher" quand SO me le permet. –

+1

Finalement accepté! - Mieux vaut tard que jamais hein? –

+0

A travaillé pour moi, merci !!! – normalUser

0

vos divs DonT existent lorsque vous essayez de lier votre fonction, cliquez sur les éléments ...

Vous devez les lier à l'avance (dynamique).

voir .live() et .delegate()

0

Je suggère d'utiliser la méthode .live de JQuery pour des raisons similaires Pointy.

Live se liera aux éléments lors de leur création.

$('div.item').live('click', function() { 
      $(this).remove(); 
      points = points + 1; 
      $('#points').val(points); 
      return false; 
      }); 
+0

La fonction ".live()" fonctionnera, mais (à mon avis) "delegate()" est une meilleure API. Lorsque vous utilisez "live()", jQuery doit encore construire la liste des éléments, même si elle ne fera rien avec elle. De plus, avec "live()" vous n'avez pas le choix de l'emplacement du vrai gestionnaire (toujours l'élément ''), alors que "delegate()" vous permet de placer le vrai gestionnaire sur n'importe quel élément du conteneur. – Pointy

Questions connexes