流星事件不触发

Question

我正在制作纸牌游戏。玩家轮流上场。玩家不能扔出任何一张牌，但会受到前一张扔出的牌的限制。如果之前的玩家扔了 7 个梅花，则当前玩家只能扔梅花。（比这更复杂，但是...）

我通过使用两个 css classes，cardRegular 和 cardThrowable 解决了这个问题，其中 cardThrowable 在鼠标悬停时将卡片向上移动，向用户表明卡片可以抛出。

我定义了这些事件：

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

当我打开页面时，这两个事件在两个浏览器中都运行良好（对于两个玩家），但是，一旦一个玩家扔掉他的牌，我就遇到了问题。

第二个玩家卡片已正确更新，只有允许的卡片具有 cardThrowable class，但两个事件都未触发。

如果我只是刷新页面，事件就会正确触发，但其他用户也会遇到同样的问题。直到他刷新页面...

我完全不知道是什么导致了这个错误。

编辑：卡片模板

<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

我认为事件处理程序未附加，因为您添加卡片的方式。

我不太明白你是如何获得 css 和离开的值的，但我假设你使用它们的方式是卡片文档中的值

尝试这样的事情HTML:

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

还有这个 JS：

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

流星事件不触发

Meteor events not firing

meteor

meteor-blaze