2016-06-29 1 views
2

Ich habe eine statisch erstellten Tabelle:jquery ‚auf‘ nicht funktioniert

<table id="table" style="width:100%"> 
    <tbody id="tbody"> 
    </tbody> 
</table> 

Ich habe dinamically einige Elemente erstellt:

var tbody = document.getElementById('tbody'); 

for (var i = 0; i < 8; i++) { 
    var tr = document.createElement('tr'); 
    for (var j = 0; j < 8; j++) { 
     var td = document.createElement('td'); 
     td.appendChild(createDiv(i,j)); // div id is = i + ' ' + j 
     tr.appendChild(td); 
    } 
    tbody.appendChild(tr); 
} 

Aber jetzt versuche ich, eine Rückruffunktion hinzufügen für jedes div, aber das funktioniert nicht. Ich denke, dass das Problem mit der Funktion jquery ist, aber ich weiß nicht, wie ich es lösen soll.

for(var x=0;x<8;x++){ 
    for(var y=0;y<8;y++){ 
     $(document.body).on('mousedown', '#' + x + ' ' + y, function(){ 
      var audio = document.getElementById('audio'); 

      audio.currentTime = 0; 
      audio.play(); 
     }); 
    } 
} 

Wenn ich versuche, das gleiche mit statischen Elementen zu tun, funktioniert es gut, weiß jemand, was passiert? Danke

+5

ID-Werte dürfen keine Leerzeichen enthalten. – Pointy

+0

Und kann nicht mit einer Nummer beginnen – ntgCleaner

+0

Vielen Dank für Ihre Hilfe, das war das Problem! Vielen Dank! –

Antwort

2

Es gibt andere Antworten hier, die in ihrer Antwort korrekt sind, aber ich wollte ein wenig mehr Klarheit hinzufügen.

Der Zweck von jQuery's on() ist, Ereignishandler an ausgewählte Elemente anzuhängen. Der Zweck des Parameters selector besteht darin, einen delegierten Handler zu erstellen. Aus der jQuery-Dokumentation:

Der Handler wird nicht aufgerufen, wenn das Ereignis direkt auf dem gebundenen Element auftritt, sondern nur für Nachkommen (innere Elemente), die mit dem Selektor übereinstimmen.

Zusätzlich:

Tragene Ereignisse haben den Vorteil, dass sie Ereignisse von untergeordneten Elementen verarbeiten können, die auf das Dokument zu einem späteren Zeitpunkt hinzugefügt werden.

(ich würde Ihnen empfehlen, den ganzen Abschnitt über Direkte und delegierte Ereignisse durch die Art und Weise zu lesen.)

In jedem Fall möchten Sie Ihr DOM in einem bestimmten Fall so aufbauen, dass es ein Top-Level-Element gibt, das zum Zeitpunkt der Übertragung des delegierten Ereignisses garantiert vorhanden ist. Es kann Ihr Tisch oder ein div-Element über Ihrem Tisch sein. Sie können auch auf den Körper oder das Dokument anhängen, aber es ist besser, das Ereignis an das nächste Element zu befestigen, die gemäß dieser Dokumentation existieren garantiert werden:

viele delegierte Event-Handler in der Nähe der Spitze des Befestigungs Dokumentbaum kann die Leistung beeinträchtigen. Jedes Mal, wenn das Ereignis auftritt, muss jQuery alle Selektoren aller angehängten Ereignisse dieses Typs mit allen Elementen im Pfad vom Ereignisziel bis zum Anfang des Dokuments vergleichen. Um eine optimale Leistung zu erzielen, hängen Sie delegierte Ereignisse an einem Dokumentstandort so nah wie möglich an den Zielelementen an. Vermeiden Sie eine übermäßige Verwendung von document oder document.body für delegierte Ereignisse in großen Dokumenten.

In Ihrem speziellen Fall scheint es, dass die Tabelle ein garantiertes Element ist. Aus diesem Grund können Sie sich daran anhängen und die divs delegieren, die sich darin befinden. (. Natürlich entsprechende Ihre Wähler einstellen, um die richtigen divs zu erhalten) Unter der Annahme, Sie alle divs zu sprudeln, dann würde Ihre Befestigung so etwas wie dieses:

$('#table').on('mousedown', 'div', function(e) { 
    console.log('Do some stuff here.'); 
}); 

Natürlich, werden Sie wollen, dies zu tun innerhalb der document ready handler um sicherzustellen, dass Ihre Elemente vorhanden sind.

Beachten Sie auch, dass IDs nicht mit einer Zahl in der HTML 4-Spezifikation beginnen können. Wenn Sie HTML 5 entwickeln, jedoch 10, solange sie eindeutig sind, keine Leerzeichen enthalten und mindestens ein einzelnes Zeichen sind.

1

In Bezug auf Ihre Armada von Event-Handler.

Verwenden Sie 3 Schritte zum 1-Handler für alle DOM-Elemente zu machen:

Sprechen Sie die sequenctial Nummer Teil der id, sie unterscheidbar zu haben.

Dann instanziieren Sie nur einen Eventhandler für den Body Mousedown-Aufruf. Nicht mehr für eine In-Schleife.

Unterscheiden Sie über das Event-Objekt (Argument Ihres Event-Callbacks), auf welche ID geklickt wurde. (Ich denke, es war event.target oder ähnlich)

In Bezug auf die Verwendung dieser wie im Kommentar hingewiesen, könnte es im Allgemeinen nützlich sein, die ID eines Dom-Elements verweisen, die auf ein Domänenobjekt verweist. Somit kann sich die explizite ID direkt auf die zugrunde liegende Ressourcenidentifizierung (pk ...) beziehen.

+0

Wenn er den Elementen eine Klasse gab, konnte er einfach einen Handler dafür hinzufügen, und jQuery wird sich darum kümmern, 'this' an das Zielelement zu binden. – Pointy

+0

Ja, absolut richtig;) Dies ist die intuitivste und einfachste Art, es zu tun! Vielleicht Schritt für Schritt ^^ – Lemonade

2
$(document.body).on('mousedown', '#tbody td', function(e){ 
    //TODO::add code here 
}); 

Brauchen nicht Ereignis zu jedem td dom.

1

einen Delegierten für jede #id Erstellen ist Overkill

Sie direkt das Click-Ereignis für jede ID in der Schleife oder einfach erstellen einen einzigen Delegierten Ereignis-Listener anhängen.

Verwandte Themen