Meteor events not firing
<p>I am making a card game. Players take turn. The player can not throw any card, but is limited by the previous card thrown. If previous player throws 7 of clubs, current player can only throw clubs. (more complicated than this, but...)</p>

<p>I solved this by having two css classes, cardRegular and cardThrowable where cardThrowable moves the card up onmousehover, indicating to the user that the card can be thrown.</p>

<p>I have defined these events:</p>

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

<p>When I open the page, both events work just fine in both browsers (for two player), however, once one player throws his card I have a problem.</p>

<p>The second players cards are properly updated and only allowed cards have the cardThrowable class, but neither event is fired.</p>

<p>If I simply refresh the page, then the events are properly fired, but then the other user has the same issue. Until he refreshes the page...</p>

<p>I am totally lost as to what may be causing this bug.</p>

<p>EDIT:
Cards template</p>

<pre><code>&lt;template name="cards"&gt;
    &lt;div class="cardsDIV"&gt;
        {{#each playerCards}}
            {{&gt; card}}
        {{/each}}
    &lt;/div&gt;
&lt;/template&gt;

&lt;template name="card"&gt;
    {{{card this}}}
&lt;/template&gt;
</code></pre>

<p>...</p>

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