Meteor Ereignisse nicht feuern

Question

Ich mache ein Kartenspiel. Die Spieler sind an der Reihe. Der Spieler kann keine Karte werfen, wird aber durch die vorherige Karte begrenzt. Wenn der vorherige Spieler 7 Schläger wirft, kann der aktuelle Spieler nur Schläger werfen. (komplizierter als das, aber ...)

Ich löste dies, indem ich zwei css-Klassen, cardRegular und cardThrowable hatte, wo cardThrowable die Karte aufmousehover bewegt und dem Benutzer anzeigt, dass die Karte geworfen werden kann.

Ich habe diese Ereignisse definiert:

Template.card.events({ 
    "click .cardThrowable": function() { 
     console.log("click .cardThrowable " + this); 
    }, 
    "click .cardRegular": function() { 
     console.log("click .cardRegular " + this); 
    } 
}); 

Wenn ich die Seite zu öffnen, arbeiten beide Ereignisse in beiden Browsern ganz gut (für zwei Spieler), jedoch, sobald ein Spieler seine Karte wirft habe ich ein Problem.

Die Karten der zweiten Spieler werden korrekt aktualisiert und nur die Karten haben die Klasse cardThrowable, aber keines der Ereignisse wird ausgelöst.

Wenn ich einfach die Seite aktualisieren, werden die Ereignisse korrekt ausgelöst, aber dann hat der andere Benutzer das gleiche Problem. Bis er die Seite aktualisiert ...

Ich bin total verloren, was diesen Fehler verursachen kann.

EDIT: Karten Vorlage

<template name="cards"> 
    <div class="cardsDIV"> 
     {{#each playerCards}} 
      {{> card}} 
     {{/each}} 
    </div> 
</template> 

<template name="card"> 
    {{{card this}}} 
</template> 

...

Template.card.helpers({ 
    card: function() { 
     return '<img src="' + cardImage(this.cardName) + 
      '" style="position:absolute;bottom:0;left:' + this.left + 'px" class="' + this.css + '" />'; 
    } 
}); 

Answer 1

Ich denke, die Event-Handler nicht angebracht, weil die Art und Weise Sie die Karten hinzufügen.

Ich verstehe nicht ganz, wie Sie die Werte für CSS und links bekommen, aber ich nehme von der Art und Weise Sie sie verwenden, dass sie Werte in der Karte Dokument sind

etwas Versuchen Sie, wie diese HTML:

<template name="card"> 
    <img class="{{this.css}} js-playCard" src="{{this.cardName}}" style="position:absolute;bottom:0;left:{{this.left}}px" /> 
</template> 

und das JS:

Template.card.events({ 
    'click .js-playCard'(event, instance) { 
    console.log("clicked " + this.css); 
    } 
});