为什么我的点击事件处理程序不起作用

Question

这太令人沮丧了！我无法让我的单击事件处理程序工作。我花了几个小时试图弄清楚问题是什么，但失败了。

下面是我的模板代码：

<template name="ViewStats">
<div class="tileMenu" > </div>
</template>

磁贴菜单具有嵌入的图像，其大小足以单击。我什至尝试用更大的图像替换嵌入的图像，希望增加可点击区域，但似乎没有任何区别。

以下是我的css：

.tileMenu{
    position: absolute;
    left: 115px;
    z-index: 2;
    height: 49px;
    background: url(images/tileMenu.png) no-repeat;
    top: 1px;
    display: block;
    height: 24px;
    margin-left: 1PX;
    margin-top: 2px;
    float: left;
    width: 17px;
    background-repeat: no-repeat;
    background-position: right 4px top 3px;
    background-size: 75% 75%;
}

现在对于未能启动的事件手拉。我做错了什么？

Template.ViewStats.events({
     'click .tileMenu': function (event) {
      alert("You clicked tileMenu"); 
        }   
 });

有人可以解释为什么我的警报功能无法启动吗？

提前感谢！

Answer 1

您的模板事件代码很好，它应该可以工作。

正因为如此，我认为您的实际事件没有发生的原因是您的点击没有在您定位的div 上注册。

这可能是由于div 的位置很奇怪或位于另一个div 下方。 尝试删除所有样式并单击div。此外，请尝试检查元素以查看实际tileMenudiv 在页面上的位置。

暂时将一些内容放在div 中作为视觉测试。所以你知道你点击的位置是div。例：

<div class="tileMenu" > CLICK ME CLICK ME CLICK ME </div>

我怀疑一旦您删除样式或找到div 的位置并单击它，您就会看到警报触发。

Answer 2

没有

内容的div"很难点击"。把一些内容放在那里，这样你就可以确保你真的点击了div。尝试添加文本和测试。或者尝试将图像放在实际的HTML而不是背景中