クリックイベントハンドラが機能しないのはなぜですか？

Question

これはイライラしています！クリックイベントハンドラを動作させることはできません。私は問題が何であるかを理解しようと時間を費やしましたが失敗しました。

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

tileMenuがクリック可能にするのに十分な大き埋め込まれた画像を、持っている：

以下は私のテンプレートコードです。 私は埋め込み画像をクリック可能領域を増やすために大きな画像で置き換えようと試みましたが、何も違いはありません。続き

は私のCSSです：

アップ火災に失敗したイベントhandlarため

.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をクリックしてみてください。要素を調べて実際のtileMenu divがページ上にある場所を確認してみてください。

視覚的検査として一時的に一部のコンテンツをdivに入れます。だからあなたはクリックしている場所を知っているdivです。例：

スタイルを削除したり、divの場所を見つけてクリックすると、警告が表示されます。

Answer 2

内容のないdivは「クリックするのが難しい」です。そこにいくつかのコンテンツを入れて、実際にdivをクリックしていることを確認することができます。テキストを追加してテストしてみてください。あるいは、画像を背景ではなく実際のHTMLに入れてみてください。