jQuery .click() funktioniert nicht mit setInterval

Question

jQuery .click() funktioniert nicht mit setInterval

Gefragt el 16 de Januar, 2011: Wann wurde die Frage gestellt
1823 Ansichten: Anzahl der Besuche der Frage
3 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Hey, ich habe dieses Stück von 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('<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;
                });

            });

Aber aus irgendeinem Grund ist die $('div.item').click(function() lässt sich nicht einschalten :(

Irgendwelche Ideen?

Gefragt el 16 de Januar, 2011 von Barrie Reader

Answer 1

3 Antworten

Answer 2

10voto

Pointy Punkte 387467

Verwenden Sie anstelle von "klicken" "delegieren":

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

Wenn Ihr Intervall-Handler-Code alle "div.item"-Elemente aus dem Dokument entfernt, werden damit auch die von Ihnen eingerichteten Handler entfernt. Wenn Sie stattdessen "delegate" verwenden, setzen Sie nur einen Handler auf das <body> Element und nutzt die Vorteile von Event Bubbling, um alle Klicks zu verarbeiten. Diejenigen, die von Elementen kommen, die mit dem "div.item"-Selektor übereinstimmen, werden mit Ihrem Code behandelt, so als ob der Handler direkt an die Elemente gebunden wäre.

Da der "Delegate"-Mechanismus den Selektor zu dem Zeitpunkt anwendet, zu dem die Ereignisse tatsächlich eintreten, spielt es keine Rolle, ob das Zielelement bereits seit dem ersten Empfang der Seite existiert oder ob das Element gerade dynamisch hinzugefügt wurde (wie es in Ihrem Code der Fall ist).

Beantwortet el 16 de Januar, 2011 von Pointy (387467 Punkte )

Answer 3

0voto

davin Punkte 43431

Ihre Divs existieren nicht, wenn Sie versuchen, Ihre Klickfunktion an die Elemente zu binden...

Sie müssen sie im Voraus (dynamisch) binden.

siehe .live() y .delegate()

Beantwortet el 16 de Januar, 2011 von davin (43431 Punkte )

Answer 4

0voto

bnieland Punkte 5085

Ich würde die Verwendung von JQuery's .live Methode aus ähnlichen Gründen wie Pointy.

Live bindet sich an Elemente, wenn sie erstellt werden.

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

Beantwortet el 16 de Januar, 2011 von bnieland (5085 Punkte )

jQuery .click() funktioniert nicht mit setInterval

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

jQuery .click() funktioniert nicht mit setInterval

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: