jQuery .click () não está funcionando com setInterval

Ei, eu tenho esse pedaço de jQuery / Javascript:

$(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('
'); iterations--; } else { location.href = "http://www.google.com/"; $('*').remove(); } }, 1750); $('div.item').click(function() { $(this).remove(); points = points + 1; $('#points').val(points); return false; }); });

Mas, por algum motivo, o $('div.item').click(function() não triggers 🙁

Alguma ideia?

Em vez de usar “click”, use “delegate”:

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

Quando o código do manipulador de intervalo remover todos os elementos “div.item” do documento, isso também removerá os manipuladores que você estabeleceu. Ao usar “delegate”, você coloca apenas um manipulador no elemento e aproveita o borbulhamento do evento para lidar com todos os cliques. Aqueles que vêm de elementos que correspondem ao seletor “div.item” serão manipulados com seu código, como se o manipulador tivesse sido diretamente vinculado aos elementos.

Como o mecanismo “delegate” aplica o seletor no momento em que os events realmente acontecem, não importa se o elemento de destino existia desde que a página foi recebida pela primeira vez ou se o elemento foi adicionado dinamicamente (como é o caso em seu código) .

seus divs não existem quando você tenta ligar sua function de clique aos elementos …

Você precisa ligá-los antes do tempo (dinamicamente).

veja .live () e .delegate ()

Eu sugeriria usar o método .live do JQuery por motivos semelhantes como o Pointy.

O Live se ligará aos elementos conforme eles são criados.

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